CSS没有变量？不要诬蔑我们大CSS好不？就像ES一样，你说JS没有模块，ES6给你整一个出来，而在这之前就已经有相关的库出来了。CSS也一样，你说CSS没有变量，CSS3就给你一个var()，变量你值得拥有！
1// 语法 2// <custom-preperty-name> 自定义属性名 3// <declaration-value>声明值（回退值） 4// var( <custom-preperty-name>, <declaration-value>? ) 5 6:root { 7 --main-bg-color: pink; 8} 9body { 10 background-color: var(--main-bg-color, blue); 11}
它也同ES6一样存在浏览器未部署不兼容的情况，即便它给了var()来打造变量，它仍旧显得很笨重！我提一个组件样式，为了避免样式冲突每次就得在前面加上一个组件唯一标识，就像这样：
1.my-content article h1 { color: #333 } 2.my-content article p { margin-bottom: 1.4em } 3.my-content aside { background-color: #EEE }
得亏CSS扩展语言出现了，它为CSS引入了变量、混合器等等语法，让CSS得到模块化发展。CSS扩展语言大体上差不多，具体使用哪个语言来工作取决于开发者个人喜好，这里以Sass/SCSS举例。先说下这两位的区别，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。
1.my-content { 2 article { 3 h1 { color: #333 } 4 p { margin-bottom: 1.4em } 5 } 6 aside { background-color: #EEE } 7}
这样感觉就好多了，层级结构清晰，编译后就达到人工手写的样子。Sass也可以配合CSS选择器：
1article { 2 ~ article { border-top: 1px dashed #ccc } 3 > section { background: #eee } 4 dl > { 5 dt { color: #333 } 6 dd { color: #555 } 7 } 8}
Sass的结构是呈父子级关系，有时需要引用同级（&）：
1article a { 2 color: blue; 3 body.ie & { color: green } 4 &:hover { color: red } 5}
如果你感觉CSS属性有时候也挺烦躁的，可以使用属性嵌套，把属性名从中划线的地方断开，紧跟{}块。
1// 这个例子不恰当，CSS本身可以简写 2nav { 3 border: { 4 style: solid; 5 width: 1px; 6 color: #ccc; 7 } 8} 9// 编译后 10nav { 11 border-style: solid; 12 border-width: 1px; 13 border-color: #ccc; 14} 15// 属性简写 16nav { 17 border: 1px solid #ccc { 18 left: 0px; 19 right: 0px; 20 } 21} 22// 编译后 23nav { 24 border: 1px solid #ccc; 25 border-left: 0px; 26 border-right: 0px; 27}
Sass赋予CSS模块的能力，开发者可以将变量单独放在一些文件来方便自定义样式，可以根据需求分出不同的文件。这时就需要用到@import，CSS不常用的一个特性。通常会只想生成少数几个css文件来减少请求，Sass有一个特殊的约定：文件名以下划线开头。这样Sass就不会在编译时单独编译这个文件输出CSS，而只把这个文件导入，@import也不需要写全名。
1// themes/_night-sky.scss 2@import "themes/night-sky";
假如你定义了一个变量的文件来供使用者改变里面的默认值，然而反复声明一个变量只有最后一处会有效覆盖前边的值，这时需要!default。
1$link-color: blue; 2$link-color: red; 3a { 4 color: $link-color; /* red */ 5} 6// 修改： 7$link-color: blue !default;
@import还允许写在CSS规则内，Sass会将局部文件的CSS规则插入到导入的位置：
1// _blue-theme.scss 2aside { 3 background: blue; 4 color: white; 5} 6 7// import 8.blue-theme {@import "blue-theme"} 9// 编译后 10.blue-theme { 11 aside { 12 background: blue; 13 color: #fff; 14 } 15}
因为Sass完全兼容CSS，所以它支持原生的@import，如果要导入原生CSS，须将后缀.css改为.scss再导入。
CSS的样式通常是给开发者内部的样式说明并不希望浏览者能看到，Sass提供了静默注释/* .... */。
为了使得网站的风格得到统一，那么统一使用变量处理是非常不错的选择，但是当样式越来越复杂，有一大段的样式要重用，独立变量就没办法了。这时需要混合器@mixin，如border-radio的兼容：
1// @mixin 2@mixin rounded-corners { 3 -moz-border-radius: 5px; 4 -webkit-border-radius: 5px; 5 border-radius: 5px; 6} 7 8// @include 9.notice { 10 background-color: green; 11 border: 2px solid #00aa00; 12 @include rounded-corners; 13} 14// 编译后 15.notice { 16 background-color: green; 17 border: 2px solid #00aa00; 18 -moz-border-radius: 5px; 19 -webkit-border-radius: 5px; 20 border-radius: 5px; 21}
那么什么时候使用@mixin呢？当不断重复使用一段样式，尤其是这段样式本身是一个逻辑单元。@mixin可以嵌套css规则，还可以进行传参及缺省参数：
1// @mixin 2@mixin rounded-corners($value:5px) { 3 -moz-border-radius: $value; 4 -webkit-border-radius: $value; 5 border-radius: $value; 6} 7 8// @include 9.notice { 10 background-color: green; 11 border: 2px solid #00aa00; 12 @include rounded-corners(15px); 13} 14// 编译后 15.notice { 16 background-color: green; 17 border: 2px solid #00aa00; 18 -moz-border-radius: 15px; 19 -webkit-border-radius: 15px; 20 border-radius: 15px; 21}
增加代码的复用的另一个方法就是继承@extend：
1.error { 2 border: 1px solid red; 3 background-color: #fdd; 4} 5.seriousError { 6 @extend .error; 7 border-width: 3px; 8}
继承和混合器的区别：继承是基于类建立在语义关系上；混合器是展示性样式的重用。在Sass里，它们实际给人的感觉没有太大差别，用哪一个最后效果都一样，直观感受有差别。比如上面的.error，然后下面对不同的错误类进行细化，形成一种递进的关系，继承比混合器更适合。
(小声嘀咕：蛮喜欢Less的混合器写法，没有那么多的命令。)
这儿提到继承和混合，顺便说一下在面向对象的编程语言中，继承（Inheritence）和混入（Mixin）之间的区别。
继承描述了一个对象是什么，而混入描述了这个对象能做什么。比如柯基犬属于犬科动物类，犬科动物又属于动物类。将拥有共性的属性、行为的事物抽象归为一体就是父类，子类拥有父类的共性，这就是继承。柯基犬会吃，人也会吃，多啦A梦也会吃。多啦A梦还拥有飞的技能，小鸟也会飞，飞机也能飞。它们归属于不同的类，拥有一种共性行为，定义这些行为然后赋予拥有这些行为的对象，这就是混入。
好了，CSS扩展语言就说到这儿，具体的全看技术选型。