文章链接

面试官：说说对Css预编语言的理解？有哪些区别?

CSS 预编语言

CSS 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题。

需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。

CSS预处理器便是针对上述问题的解决方案。

预处理语言

扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便。

本质上，预处理是CSS的超集。

包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。

Less

Less

HTML

<div id="header">变量，混入</div>
<div id="father">
    <div class="son">嵌套1</div>
    <div class="daughter">嵌套2</div>
</div>
<div id="outside">
    <div id="inside">作用域</div>
</div>

Less

// 变量，混入
@width: 100px;
@height: @width + 100px;
#header {
    width: @width;
    height: @height;
    background-color: antiquewhite;
    .bordered();
}
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
// 嵌套
#father {
    width: 300px;
    .son {
        font-size: 30px;
    }
    .daughter {
        background-color: orange;
    }
}
// 作用域
@var: red;
#outside {
  #inside {
    color: @var; // blue
  }
  @var: blue;
}

Sass/Scss

sass

HTML(同上)

SCSS

// 变量，混入
$width: 100px;
$height: $width + 100px;
@mixin bordered($border: red) {
  border-top: dotted 1px black;
  border-bottom: solid 5px $border;
}
#header {
  width: $width;
  height: $height;
  background-color: antiquewhite;
  @include bordered;
}
// 嵌套
#father {
  width: 300px;
  .son {
    font-size: 30px;
    @include bordered($border: blue);
  }
  .daughter {
    background-color: orange;
  }
}
// 作用域
$var: red;
#outside {
  $var: blue;
  #inside {
    color: $var; // blue
  }
  // $var: blue; // 不可行
}