Less和Scss

css预处理器

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。

为什么要使用CSS预处理器

CSS仅仅是一个标记语言，不可以自定义变量，不可以引用。

CSS有具体以下几个缺点：

        1，语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；

        2，没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

使用预处理器的优点：

        1，提供CSS层缺失的样式层复用机制

        2，减少冗余代码

        3，提高样式代码的可维护性

Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。一个合法的CSS代码段本身也是一段合法的LESS代码段。

Less 提供了变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。

变量

变量允许我们在一个地方定义一系列通用的值，然后在整个样式表中调用。

在做全局样式调整的时候，可能只需要修改几行代码就可以了。

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
复制代码

编译为：

#header {
  width: 10px;
  height: 20px;
}
复制代码

混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
复制代码

如果希望在其它规则集中使用这些属性，只需像下面这样输入所需属性的类（class）名称即可

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}
复制代码

嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

#header {
  color: black;
}
#header .navigation {
  font-size: 12