Sass和Less都是优秀、使用广泛的CSS预处理器。CSS预处理器处理的事情几乎都是一致的，用哪种语言都可以。只不过有时在多个项目中使用不同的语法很容易产生混乱，所以在这里做个对比增强记忆。
简介：
CSS是一种标记性语言。如果没有calc()方法，CSS是不能进行真正意义上的计算的，更不提函数、变量这些了。早期网页开发还处于刀耕火种的时期，每一个样式都需要手写或复制，不能调用。有一个时期，“同一样式多处调用”的需求产生了“原子样式”的写法，类似于：
.center {
text-align: center;
}
很明显这种写法还是很累赘。
Sass
Sass是Ruby开发者为前端开发提供的处理CSS的工具。它为CSS提供更动态的设定方式，允许编译、变量、函数……总之，使CSS更动态，也更像一门真正的可编程语言。
- Sass是基于Ruby开发的，所以开发环境首先需要安装Ruby。
- 浏览器中无法编译Sass，所以要先编译好css文件，再交给浏览器。Sass不能在浏览器环境中直接运行。
Less
Less是晚些产生的语言，基于JS进行开发，在Node中进行编译。所以使用时不需要安装其他语言，不过要记得先导入less文件，然后导入less.js。提供CDN地址在这里：
<script src="https://cdn.bootcss.com/less.js/3.0.4/less.js"></script>
<script src="https://cdn.bootcss.com/less.js/3.0.4/less.min.js"></script>
当然Less也提供服务器端的编译功能。
基本语法：
1. 变量
Sass: $var
Less: @var
两种语言都会有作用域的问题。一个变量只能在它被定义的代码块中使用。重复定义的变量会报错。
2. 运算赋值：
只要保持单位统一或可相互转换，就可以进行运算，包括颜色在内：
Sass:
p {
cursor: e + -resize;
}
// 编译为
// p {
// cursor: e-resize;
// }
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
Less:
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
@var: 1px + 5;
width: (@var + 5) * 2;
border: (@width * 2) solid black;
3. 嵌套
Sass和Less均允许元素嵌套。如果父子选择器均用逗号分开，那么编译时会按结合律拆开编译。
Sass和Less指代上层元素均使用&符号。
4. 继承
Sass中，写好的选择器进行集成，需要@extend关键字。
Less中，直接写入即可：.be-extend-class;
5. Mixin
Sass中，需要进行Mixin操作的选择器需要@mixin关键字，选择器后可以传入变量和默认值。
@mixin left($value: 10px)
padding: $value
使用时使用@include关键字，并可以更新变量：
@include left
@include left(20px)
Less中Mixin和继承感觉更相似，选择器在书写时就留好了变量，直接继承或更新变量即可：
.be-extend-class(@width: 10px) {
padding: @width
}
// 使用
.be-extend-class;
.be-extend-class(20px);
6. 注释
两种语言相同：多行注释格式可保留，单行注释格式会在编译时被删除。
/* 会被保留的注释格式 */
// 不保存的注释格式
略高级的语法：
1. 颜色运算：
CSS预处理器提供一系列颜色函数帮助生成主题系列颜色：
Sass：
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080 灰度
complement(#cc3) // #33c
Less：
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2
2. 插入文件
两种语言相同，使用@import关键字引入。注意后缀名，可以直接导入css文件。后缀名为css的文件不会被预处理器处理。
@import "path/filename.scss";
@import "lib.less";
@import "lib.css";
高级语法：
从这里开始，两种工具开始有较大的区别。
Sass
在Sass中，需要用Sass自己的一套语言编程：
1. 条件if-else
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
2. 循环
for:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
3. 自定义函数
需要@function、@return关键字。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
Less
Less是使用JS作为编译环境的，所以它支持JS语法。
1. 字符串插值
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
2. 用反引号使用JS语法：
@var: `"hello".toUpperCase() + '!'`;
3. 直接访问JS环境
@height: `document.body.clientHeight`;
