CSS 预处置器

CSS 预处置器是啥？一样来说，它们基于 CSS 扩展了一套属于本人的 DSL（Domain Specific Language），来解决我们书写 CSS 时难以解决的问题：

• 语法不足强大，比方没法嵌套书写致使模块化开发中需要书写许多反复的选中器；
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必需以字面量的情势反复输出，致使难以保护。

归结起来就是抽象能力。所以这就决议了 CSS 预处置器的主要目标：供给 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可保护性。这不是画龙点睛，而恰恰是锦上添花。

但是，CSS 预处置器也不是万金油，CSS 的好处在于简捷、随时随地被使用和调试。预编译 CSS 步骤的参加，让我们开发工作流中多了一个环节，调试也变得更费事了。更大的问题在于，预编译很容易造成后代选中器的滥用。所以在使用 CSS 预处置器时，要留意幸免显现此类问题。

Sass 中变量以 $ 打头比力不容易和 CSS 标准语法冲突。Less 中变量则以 @ 打头，虽说容易和后续标准更新的新语法冲突，但是理论上只要 CSS 标准不引入 @a: b 这样的规则，问题也不大。并且标准拟定的时候也会参照 许多现有的实现。

Sass 和 Less 的变量机制有很大的不一样，Sass 是相似 JS 的块级作用域一样，可以在作用域内从新赋值而不影响外部，Less 是以全局的最后一次赋值为准。SASS 和 SCSS 只是两种语法风格罢了，SCSS 更切近 CSS 语法，前端写起来更舒适。Less 和 Sass 最常用的部分并没有明显的不同，不消太在意该用哪个，Just pick one。至于公司用哪个，跟着用就行，不出大问题不消思考换。

文件切分

页面越来越复杂，需要加载的 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 {...}复制代码

<!-- 挂载到这两个元素身上 --><p class="info clearfix">...</p>...<footer class="clearfix">...</footer>复制代码

把展现层的实现显露到了构造层，是不是很不爽？而在预处置器中，我们还可以选中另一种重用方式：

// 为 clearfix 定义一个 mixin
clearfix()
    ...
    &::after
        ...

// 在需要的元素身上调取
.info
    clearfix()

footer
    clearfix()复制代码

工程化

CSS 预处置说话没法直接运转于阅读器环境，这意味着我们编写的源码需要编译为 CSS 代码之后才能用于网页。这好像是一个门槛，需要我们付出“额外”的成本。

但在当前的大环境下，大多数项目的前端开发流程已经包括了构建环节，比方选中任何一个足本模块化方案都是需要在摆设时走一道打包程序的。所以对大多数团队来说，这个门槛其实已经跨过去一大半了。

而一旦接受了这种设定，我们还可以享受到“额外”的福利。在给 CSS 的开发参加编译环节的同时，还可以顺路参加其它构建环节，比方代码校验、代码紧缩、代码后处置等等。

“代码后处置”是指 PostCSS 平台上各类插件所供给的功效，光是 Autoprefixer 这一项就已经值回票价了。我们再也不需要在 CSS 代码中手工增加阅读器前缀了，直接使用标准写法，剩下的事情让工具搞定吧！

引荐教程：《CSS教程》

以上就是CSS 预处置器的具体内容，更多请关注百分百源码网其它相关文章！