CSS预处理器

一、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等