CSS工程化

CSS编译器的出现

CSS经过多个版本的更迭，从CSS1 到 CSS3，历时多年。虽然新出了不少属性和规范，但 在语言本身的特性上，并没有本质的改变。尽管使用 @import 指令可以解决部分模块化的 问题，但还远远不够。但W3C官方似乎对这些问题视而不见，就是不解决，于是，随着前 端技术（特别是JS）的快速发展，很多第三方机构开始尝试进入CSS这个古老的领域，开 始着手解决这些遗留太久的难题。 而它们的思路，就是像解决JS的问题那样，用编译器来解决CSS的问题

什么是CSS编译器

CSS编译器，也叫做CSS预编译器，是指开发者使用某种类似CSS（但实际不是）的语言编写代 码，然后通过编译器，将其编译成浏览器真正能执行的CSS代码。 目前常见的CSS编译器有：SASS和LESS。本文已最常用的SASS为例，来讲解如何用SASS来实现 优雅简洁的CSS代码。

SASS示例

$darkcolor : #2E2E2E; //定义一个颜色变量，值为#2E2E2E
$lightcolor : #c1c1c1; //定义一个颜色变量，值为#c1c1c1
.site-footer {
background: $darkcolor; //使用变量$darkcolor的值作为背景色
color: $lightcolor; //使用变量$lightcolor的值作为前景色
padding: 50px 0;
}
.site-header {
background: $darkcolor; //使用变量$darkcolor的值作为背景色
color: $lightcolor; //使用变量$lightcolor的值作为前景色
position: fixed;
left: 0;
top: 0;
}

上面的代码虽然看上去和CSS代码很像，但其实仔细观察，它并不是CSS语言（CSS中可没有变 量），而它是用SASS语言书写而成的。 这段代码并不能被浏览器识别，因为浏览器不认识SASS代码。

因此，需要使用SASS编译器进行编译，它会将我们的SASS代码编译成CSS代码，编译完成后，会 得到类似这样的CSS代码：

.site-footer {
background: #2E2E2E;
color: #c1c1c1;
padding: 50px 0;
}
.site-header {
background: #2E2E2E;
color: #c1c1c1;
position: fixed;
left: 0;
top: 0;
}

看到了吗？两个类选择器中的背景色和前景色被变量的值替换了，这段代码是可以被浏览器执行 的。 也就是说，我们可以使用SASS语言来编写没有重复的、简洁优雅的CSS代码，编写好后，只 需要让SASS编译器启动起来，将其生成最终的CSS代码交给浏览器执行就可以了。 

如何安装SASS插件

笔者用的是Visual studio code编辑器，就可以直接在这里面下两个有关SASS的扩展插件--live sass compiler和live  server

编写SASS代码

在css文件中新建一个 index.scss 文件，注意后缀名为 .scss ，表示这是一个使用Sass CSS语言 编写的文件。 在该文件中输入下面的代码：

@charset "utf-8";
$darkcolor : #2E2E2E; //定义一个颜色变量，值为#2E2E2E
$lightcolor : #c1c1c1; //定义一个颜色变量，值为#c1c1c1
.main{
background: $darkcolor; //使用变量$darkcolor的值作为背景色
color: $lightcolor; //使用变量$lightcolor的值作为前景色
}

从代码中我们可以看到，sass语言中是支持 // 注释的。

变量

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变 量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性 值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。 sass使用 $ 符号来标识变量。

变量声明

sass变量的声明和css属性的声明很像： $highlight-color: #F90; 这意味着变量$highlight­color 现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的 多个属性值，如 $basic-border: 1px solid black; ，或以逗号分割的多个属性值，如

$plain-font: "Myriad Pro","Myriad","Helvetica Neue","Helvetica","Liberati on Sans","sans-serif";

这时变 量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。 与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只 能在此规则块内使用。如果它们出现在任何形式的{…}块中：

$nav-color: #F90; nav { $ 100px;  $width; //$width只能在该规则块中使用 color: $nav-color; }

编译后：

nav {  100px; color: #F90; }

在这段代码中， $nav-color 这个变量定义在了规则块外边，所以在整个样式表中都可以像 nav规 则块那样引用它。 $width 这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。 这意味着是你可以在样式表的其他地方定义和使用 $width 变量，不会对这里造成影响。

只声明变量其实没啥用处，我们最终的目的还是使用它们，接下来我们将进一步探讨变量的使用方 法。

变量引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量 会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此 变量的地方生成的值都会随之改变。

$highlight-color: #F90; .selected { border: 1px solid $highlight-color; }

编译后：

.selected { border: 1px solid #F90; }

看上边示例中的 $highlight-color 变量，它被直接赋值给 border 属性，当这段代码被编译输出 css时， $highlight-color 会被 #F90 这一颜色值所替代。产生的效果就是给 selected 这个类一 条1像素宽、实心且颜色值为 #F90 的边框。

在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相 当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了 一个变量：

$highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; }

编译后： .

selected { border: 1px solid #F90; }

这里， $highlight-border 变量的声明中使用了 $highlight-color 这个变量。产生的效 果就跟 你直接为 border 属性设置了一个 1px $highlight-color solid 的值是一样的。

嵌套CSS 规则

嵌套选择器

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又 一遍地重复父级样式：

/* css代码 */ 
.site-footer .footer-container .footer-menu { display: flex;  773px; justify-content: space-between; line-height: 3; } 
.site-footer .footer-container .footer-menu li { font-size: 14px; }
 .site-footer .footer-container .footer-menu li a:hover { color: #fff; }
 .site-footer .footer-container .footer-menu li:first-child { font-size: 16px; color: #eee; }

这种情况下，使用SASS语言，每个选择器只需要书写一遍即可：

//SASS代码 .site-footer .footer-container .footer-menu {
 display: flex;  773px; 
justify-content: space-between; 
line-height: 3; 
li{ 
font-size: 14px; a:hover { 
color: #fff; 
} 
&:first-child{
 font-size: 16px; 
color: #eee; 
} 
} 
}

在上面的sass代码中，使用了&符号，该符号表示向当前选择器直接追加样式，比如：

.parent{ .other{ } } .parent{ &.other{ } }

上面两段代码编译的结果分别如下：

.parent .other{ } .parent.other{ }

嵌套属性

在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么 糟糕，但是要反复写 border-style 、 border-width 、 border-color 以及 border-* 等也是非 常烦人的。在sass中，你只需敲写一遍border：

nav { border: 
{
 style: solid;  1px; color: #ccc;
 } 
}

如果你读到这里，对SASS的基本使用就了解的差不多了。SASS还有更多激动人心的功能，就不是 短篇幅能够说清的了。 如果你对具有强大生产力的SASS有兴趣，可以去SASS中文网了解更多关于它的细节。