前言
CSS与编译器现如今几乎成为开发CSS的标配，大幅度提高了使用 CSS 的开发效率。本文简单介绍了 CSS 预处理器和 Less 与 Scss 预处理语言。
CSS 预处理器
CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成 CSS 的程序。市面上有很多 CSS 预处理器可供选择，且绝大多数 CSS 预处理器会增加一些原生 CSS 不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让 CSS 的结构更加具有可读性且易于维护。（摘自MDN）
利用代码混合，嵌套选择器，继承选择器等功能，大幅度提高了使用 CSS 的开发效率，提高了代码的复用性和可维护性。不同的 CSS 预处理器的功能、特性虽然略有差异，但基本的实现目标都是相同的。它们几乎都实现了有关变量、嵌套、mixin、继承等功能。
Less 与 Scss
Less（Leaner Style Sheets）和 Scss（Sassy Cascaded Style Sheets） 都是经典的 CSS 预处理语言。其中 Scss 是 Sass（Syntactically Awesome Style Sheets）的继承和该进，受 Less 影响使用了类似原生 CSS 的语法。
- less 是一个 css 的增强版，通过 less 可以编写更少的代码实现更强大的样式
- 在 less 中添加了许多的新特性：像对变量的支持、对 mixin 的支持……
- less 的语法大体上和 css 语法一致，但是 less 中增添了许多对 css 的扩展，所以浏览器无法直接执行 less 代码，要执行必须向将 less 转换为 css，然后再由浏览器执行
Less 和 Scss 都可以通过插件转成对应的 CSS 文件。
Less 和 Scss 都可以使用变量和插值，变量都拥有作用域，就类似平常使用的其他编程语言。
Less 用 @ 符号表示变量，使用 @{} 语法进行变量插值。
@border-color: #dadbdd;
@main-top: search;
.@{ main-top } {
border: 1px solid @border-color;
}
Scss 用 $ 符号表示变量，使用 #{} 语法进行变量插值。
$border-color: #dadbdd;
$main-top: search;
.#{ main-top } {
border: 1px solid @border-color;
}
Less 和 Scss 中都可以直接进行运算，但其实原生 CSS 已经支持了 calc() 函数进行运算。
Less 和 Scss 中都可以使用大括号进行子元素的嵌套，并使用 & 指代父元素。
.parents {
width: 100px;
height: 100px;
.children {
width: 50px;
height: 50px;
}
&:after {
content:"Less is more!";
}
}
媒体查询也能写成嵌套的样式，结合混合使用，可以写出清晰的媒体查询代码。
使用混合（mixins）可以写出类似传统编程语言中的函数，并还可以设置参数和实现类似多态的功能。此外，Less 和 Scss 中都拥有类似继承的实现，给样式的书写提供了更多的可能性。
.triangle(right,@width:20px,@color:#000) {
border-color:transparent @color transparent transparent ;
}
.triangle(left,@width:20px,@color:#000) {
border-color:transparent transparent transparent @color;
}
#main{
.triangle(left, 50px, #999)
}
Scss 可以使用条件语句、循环语句，Less 则不能。
参考资料
CSS 预处理器 - MDN Web 文档术语表：Web 相关术语的定义 | MDN
Less 快速入门 | Less.js 中文文档 - Less 中文网
Sass 中文网
前端面试题之CSS篇
学习Less-看这篇就够了 - 掘金
