一、CSS预处理器
CSS预处理器是一种专门的编程语言，用来为CSS增加一些编程特性（CSS本身不是编程语言）。
不需要考虑浏览器兼容问题，因为CSS预处理器最终编译和输出的仍是标准的CSS样式。
可以在CSS预处理器中：使用变量、简单逻辑判断、函数等基本编程技巧。
二、CSS预处理器主要目的
- CSS语法不够强大（例如：CSS选择器无法进行嵌套，导致CSS中存在较多重复的选择器语句）；CSS中无法定义变量以及没有合理的样式复用机制，导致整体CSS样式难以维护。
.body .box .title {
color: #478fb7;
font-size: 17px;
}
.body .box .name {
color: #478fb7;
font-size: 12px;
}
- 为了减少CSS代码冗余，为CSS提供样式复用机制，提高CSS代码的可维护性。
三、工作流程
各种预处理器语法不一样，但最终工作流程是一样的，以Sass为例。
- 以Sass提供的语法规则编写样式代码
- 经过编译器把Sass编写的代码转换成标准的CSS代码
- 浏览器加载解析转换后的CSS样式（浏览器只能解析标准的CSS代码，而不能是Sass等）
四、主流CSS预处理器
- Sass，2007，最早最成熟的CSS预处理器，有两种语法，分别以 .sass 和 .scss 为扩展名。SCSS是Sass 3引入的新语法，完全兼容CSS3，并继承了Sass的强大功能，和CSS语法结构更接近
- Less，2009，受Sass影响大，以 .less 为扩展名
- Stylus，2010，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，以 .styl 为扩展名
五、CSS预处理器的使用
- 集成在前端开发工具中使用（插件），如 VS Code、WebStorm 等
- 集成在项目构建工具中，在项目编译（打包）时进行自动转换，如 webpack、gulp等
