零.CSS预编译器
CSS预处理器是指对生成CSS前的某一语法的处理。CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，供项目使用
CSS预处理器为CSS增加一些编程的特性，如增加了规则、变量、混入、选择器、继承等等特性，无需考虑游览器的兼容性问题
有助于更好地组织管理样式文件，以及更高效地开发项目
下面介绍主流的CSS预编译器三剑客：
一. CSS预编译器三剑客（Sass、Less、Stylus)
Sass：Sass包括两套语法。最开始的语法叫做"缩进语法"，使用缩进来区分代码块，并且用回车将不同规则分隔开（不使用{}和；）。
而新的语法叫做“SCSS”，使用和CSS类似的块语法，使用大括号将不同的规则分开，分号将具体的样式分开。这两套语法通过.sass和.scss两个文件扩展名区分开
1.使用：
通过VSCode安装Live Sass Compiler插件等方法...
2.CSS功能扩展：
2.1：嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：
#main { width: 97%; p, div { font-size: 2em; a { font-weight: bold; } } pre { font-size: 3em; } }
嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理，编译后：
#main { width: 97%; } #main p, #main div { font-size: 2em; } #main p a, #main div a { font-weight: bold; } #main pre { font-size: 3em; }
2.2：父选择器&
在使用2.1嵌套规则时，有时也需要使用嵌套外层的父选择器，例如，给某个元素设定hover样式时
a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } } #main { color: black; a { font-weight: bold; &:hover { color: red; } } }
编译后：CSS 文件中&将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递
a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; } #main { color: black; } #main a { font-weight: bold; } #main a:hover { color: red; }
2.3：属性嵌套
个别 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。
为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：
.funky { font: { family: fantasy; size: 30em; weight: bold; } }
编译为：
.funky { font-family: fantasy; font-size: 30em; font-weight: bold; }
2.4：变量$
Sass最普遍的用法就是变量，以$开头，复制与css属性写法一样，直接调用即可
$width: 100px #main { width: $width; }
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用
（全局变量）
将局部变量转换为全局变量可以添加 !global 声明：
#main { $width: 5em !global;//局部变量转全局变量 width: $width; } #sidebar { width: $width; }
编译为:
#main { width: 5em; } #sidebar { width: 5em; }
2.5：运算
所有数据类型均支持 == 或 != ,此外，每种数据类型也有各自支持的运算方式
目前感觉这个运算用处不大，但今后遇到某个项目也可能会用到
2.6：@-Rules与指令
2.6.1：Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件，被导入的文件将合并编译到同一个 CSS 文件中，
另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
@import "foo.scss"; @import "foo";
都会导入文件foo.scss
如果需要导入SCSS或者Sass文件，但不希望编译成CSS文件，在文件名前添加下划线即可
例如，将文件命名为 _colors.scss，便不会编译成_colors.css 文件。
2.6.2：Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套
如果 @media 嵌套在 CSS 规则内，编译时， @media 将被编译到文件的最外层，包含嵌套的父选择器
这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程
@media 可以使用 Sass（比如变量，函数，以及运算符）代替条件的名称或者值：
.sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } }
编译为：
.sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } }
2.6.3：@extend ，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。
.error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }
2.7：Mixin
Mixin用于定义可重复使用的样式，避免了使用无语意的 class，比如.float-left
混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式
混合样式中也可以包含其他混合样式
2.7.1：定义Mixin
@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } }
2.7.2：引用Mixin
.page-title { @include large-text; padding: 4px; margin-top: 10px; }
编译为：
.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }
2.7.3：Mixin参数
@mixin sexy-border($color, $width：10px) { //默认值 border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue, 1in); }
编译后
p { border-color: blue; border-width: 1in; border-style: dashed; }
@Mixin 可以用 = 表示，而 @include 可以用 + 表示
2.8：函数
$grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); }
#sidebar {width: 240px; } //编译结果
Less：Less是一门向后兼容的CSS扩展语言，语法上和Sass有很大的共性，它受Sass的影响，但对后来引入的SCSS格式有影响
Stylus：在 stylus 中同样可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，使用时需要Node.js
基本使用：
$background-color = lightblue add (a, b = a) a = unit(a, px) b = unit(b, px) a + b .list-item .text-box span background-color: $background-color margin: add(10) padding: add(10, 5) &:hover background-color: powderblue
编译后
.list-item span, .text-box span { background-color: #add8e6; margin: 20px; padding: 15px } .list-item:hover, .text-box:hover { background-color: #b0e0e6; }
PostCSS：一个用 JavaScript 工具和插件转换 CSS 代码的工具
特点：
CSS Modules二.异同点
Less与Sass的异同：
异：
同：
三.总结
为CSS增加一些编程的特性，如规则、变量、混入、选择器、继承等等特性，上手都很简单
(CSS的调试，需要编译，文件过大都是预处理器的缺点)
参考：
