CSS预处置器
页面越来越复杂，需要加载的 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 这样的值也是幻数，还需要进一步解释。将来当行高或行数产生变化的时候，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%)
此外，预处置器的函数往往还支撑默许参数、具名实参、arguments 对象等高级功能，内部还可以设定前提分支，可以知足复杂的逻辑需求。
Mixin
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教程》
以上就是CSS 预处置器的细致内容，更多请关注 百分百源码网 其它相干文章！
