什么是 CSS 预处理器？ 一般来说，他们在CSS的基础上扩展了自己的DSL（DomainSpecificLanguage）来解决我们在编写CSS时未能解决的问题：
这归结为具体的能力。 所以这就决定了CSS预处理器的主要目标：提供CSS所没有的样式层重用机制，减少冗余代码，提高样式代码的可维护性。 这不是锦上添花，而是雪中送炭。
然而，CSS 预处理器并不是万能的。 CSS的目的是随时随地易于使用和调试。 预编译CSS步骤的加入，给我们的开发工作流程增加了一个额外的环节，让调试变得更加麻烦。 更大的问题是预编译很容易导致后代选择器的误用。 所以在使用CSS预处理器时，要小心防止这个问题。
Sass 中以 $ 开头的变量不太可能与 CSS 标准句型冲突。 Less中的变量以@开头，虽然在后续规范更新中很容易与新的句型发生冲突，而且理论上只要CSS规范不引入@a:b之类的规则，问题并不大。 并且在制定规范的时候，我们也会参考很多现有的实现。
Sass和Less的变量机制有很大不同。 Sass 类似于 JS 的块级作用域。 您可以在范围内重新形成参数css3 计算函数，而不会影响外界。 Less以最后一个全局形式参数为标准。 SASS和SCSS只是两种句子风格。 SCSS更接近CSS的句子风格，后端写起来更舒服。 Less 和 Sass 最常用的部分没有显着差异。 不用太担心该使用哪一个，Justpickone。 至于公司用的，就继续用吧。 如果没有什么大的问题，就不要考虑改变。
文件分割
页面变得越来越复杂，需要加载的CSS文件也越来越大。 大文件必须拆分，否则无法维护。 传统的CSS文件拆分解决方案基本上是CSS原生的@import指令，或者在HTML中加载多个CSS文件。 这种方案一般不能满足性能要求。
CSS 预处理器扩展了 @import 指令的功能，并通过编译过程将分割的文件重新合并为一个大文件。 这样一方面解决了大文件维护不方便的问题，另一方面也解决了加载一堆小文件时的性能问题。
模块化的
将文件划分的思想进一步推进就是“模块化”。 一个大的CSS文件经过适当的划分后，形成的小文件之间的关系应该是树形结构。
树的根囊肿通常称为“入口文件”，树的其他节点通常称为“模块文件”。 入口文件一般依赖于多个模块文件，每个模块文件还可能依赖于其他更终端的模块，从而形成一整棵树。
这是一个简单的例子：
entry.less ├─ base.less │ ├─ normalize.less │ └─ reset.less ├─ layout.less │ ├─ header.less │ │ └─ nav.less │ └─ footer.less ├─ section-foo.less ├─ section-bar.less └─ ...复制代码
登录后复制
入口文件entry.less会在编译时引入所需的模块，生成entry.css，然后被页面引用。
如果你使用过其他具有模块机制的编程语言，你应该已经意识到，模块化是一种非常好的代码组织形式，也是开发人员设计代码结构的重要手段。 模块可以清晰地实现代码分层、复用和依赖管理，让CSS开发过程享受现代程序开发的便利。
选择器嵌套
选择器嵌套是文件内代码组织的一种形式，它允许一系列相关规则呈现层次关系。
多变的
在发生变化之前，CSS中的所有属性值都是“幻数”。 你不知道这个值从哪里来，也不知道它的含义是什么。 有了变量之后，我们可以给这些“魔法数字”起一个名字，以方便记忆、阅读和理解。
接下来，我们会发现，当在多个地方使用特定值时，变量是一种简单有效的具体方法，可以消除这些重复，让你的代码更加 DRY。
变量让开发者更容易统一网站的视觉风格，也让诸如“换皮”之类的需求变得越来越容易。
手术
仅仅有变量是不够的，我们还需要操作。 如果变量让值变得有意义，这个操作可以将值与值关联起来。 虽然某些属性的值与其他属性的值密切相关，但CSS句型无法表达这种关系； 在预处理语言中，我们可以使用变量和表达式来表示这些关系。
作为反例，我们需要允许容器最多只显示三行文本。 以前我们通常这样写：
.wrapper { overflow-y: hidden; line-height: 1.5; max-height: 4.5em; /* = 1.5 x 3 */}复制代码
登录后复制
可以发现我们只能用注释来表达 max-height 的值是怎么来的，但是注释中的 3 这样的值也是幻数，需要进一步解释。 以后当列宽或者行数发生变化时css3 计算函数，max-height的值和注释中的公式也需要同步更新，维护起来非常不方便。
接下来我们用一种预处理语言来改进它：
.wrapper $max-lines = 3 $line-height = 1.5 overflow-y: hidden line-height: $line-height max-height: unit($line-height * $max-lines, 'em')复制代码
登录后复制
乍一看，虽然代码行数增加了，但代码的目的却变得更加清晰——整个事情都解释清楚了，没有任何注释。 后期维护时，只需更改这两个变量即可。
值得一提的是，这些书写方式还带来了另一种用途。 变量 $line-height 可以是 .wrapper 本身定义的局部变量（如前面的代码），也可以从更低的作用域获取：
$line-height = 1.5 // 全局统一行高 body line-height: $line-height .wrapper $max-lines = 3 max-height: unit($line-height * $max-lines, 'em') overflow-y: hidden复制代码
登录后复制
这意味着 .wrapper 可以从其祖先那里继承列宽，而不必为了“仅显示三行”的要求而硬编码自己的列宽。 通过操作，我们有能力表达属性之间的关系，这使得我们的代码更加灵活和DRY。
功能
通过体现常用的操作，我们得到了函数。
开发者可以自定义函数，预处理器本身也有大量的外部函数。 最常用的外部函数应该就是颜色运算函数了！ 有了它们，我们甚至不需要打开Photoshop来调整颜色，我们就可以获得某种颜色的相同颜色变体。
举个反例，我们想给按钮添加键盘悬停效果，最简单的悬停效果就是让按钮变暗。 我们编写的 CSS 代码可能如下所示：
.button { background-color: #ff4466;
}.button:hover { background-color: #f57900;
}复制代码
登录后复制
我相信，即使我是最资深的视觉设计师，也很难区分#ff4466和#f57900这两种颜色之间的关系。 如果我们的代码是用预处理语言编写的，那么事情会更加直观：
.button $color = #ff9833 background-color: $color &:hover background-color: darken($color, 20%)复制代码
登录后复制
据悉，预处理器函数通常还支持默认参数、命名左值和参数对象等中间函数。 内部还可以设置条件分支，以满足复杂的逻辑需求。
混合
Mixin 是 CSS 预处理器提供的另一个有用的功能。 mixin的形式和用法与函数非常相似——首先定义，然后在需要的地方调用，并且在调用时可以接受参数。 它和函数的区别在于，函数是用来构成一个值，而mixin是用来构成一段CSS代码。
Mixin 可以形成多个 CSS 规则或仅形成一些 CSS 声明。
一般来说，Mixin 可以将 CSS 文件中类似的代码块可视化，并给它们一个直观的名称。 例如，CSS框架可以将一些常用的代码片段封装为mixin供以后使用，内部按需调用，或者暴露给用户供业务层调用。
例如，我们经常使用clearfix来关闭浮动。 在原生CSS中，如果想避免重复clearfix代码，往往只能先定义一个.clearfix类，然后挂载到HTML中需要的元素头：
/* 为 clearfix 定义一个类 */
.clearfix {...}
.clearfix::after {...}复制代码
登录后复制
...
...复制代码
登录后复制
将表示层的实现暴露给结构层是不是很不舒服？ 在预处理器中，我们还可以选择另一种形式的重用：
// 为 clearfix 定义一个 mixin
clearfix()
...
&::after
...
// 在需要的元素身上调用
.info
clearfix()
footer
clearfix()复制代码
登录后复制
工程
CSS预处理语言很难直接运行在浏览器环境中，这意味着我们编译的源代码需要编译成CSS代码然后才能在网页上使用。 这其实是一个门槛，需要我们付出“额外”的成本。
然而，在目前的环境下，大多数项目的后端开发过程已经包含了创建过程。 例如，如果您选择任何脚本模块化解决方案，则在部署过程中需要经历打包过程。 所以对于大多数团队来说，这个门槛已经跨过一大半了。
而一旦我们接受了这些设置，我们还可以享受到“额外”的好处。 CSS开发添加编译链接的同时，还可以添加其他构建链接，比如代码校准、代码压缩、代码后处理等。
“代码后处理”是指PostCSS平台上各种插件提供的功能。 仅 Autoprefixer 就已经值回票价了。 我们不再需要手动在 CSS 代码中添加浏览器前缀，只需使用标准的编写方法，剩下的就让工具来处理吧！
推荐教程：《CSS教程》
