我们曾经面对 css 很多令人发指的不友好特性,也因为 css 的低复用性而刀耕火种。
css 预处理器就是这样被创造出来,弥补了直接写 css 的一些缺憾:
Sass有两种语法,分别以「 *.sass 」和「 *.scss 」为扩展名。这里你可以查看Sass 和 Scss 的异同。Sass 兼容 css ,你可以在 sass 文件里写 css,也可以严格按照 sass 的缩进方式省去「大括号」和「分号」,最终它们都会被编译成标准 css,比如:
/*style.sass*/
h1
color: #666
background-color: #666
Less 受 Sass 的影响非常大,以「 *.less 」为扩展名,是 sass 之后的又一款优秀的 css 预处理器。其特点包括:
比如这样的 Less(来自bootcss/less)
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
相比于 sass 的激进和 less 的常规,Stylus 是一个高效、动态以及丰富的 CSS 预处理器。它同时支持缩进的和通俗的两种风格的 CSS 语法风格。
Stylus 扩展名为「 *.styl 」,跟另外两款 css 预处理器相比略显年轻,社区以及推广程度也不及 sass 和 less,但它的一些优秀特性同样令人着迷。
Nib是 Stylus 的应用的类库。给你的「 *.styl 」添加 Nib 的最快方式是克隆 Nib 的 Git 版本库并引入,因为有了 Nib,Stylus 的高效性才更为突出。
除了包含 Less 的一些优点,Stylus 在容错性上的突出特性也十分吸引我,你可以在一个 Stylus 文件里这样写,且它们都会被编译成标准 css:
/*style.styl*/
/*类似于CSS标准语法*/
h1 {
color: #963;
background-color:#333;
}
/*省略大括号({})*/
h1
color: #963;
background-color: #333;
/*省略大括号({})和分号(;)*/
h1
color:#963
background-color:#333
1.变量:
2.作用域:
css 预编译器把变量赋予作用域,也就是存在生命周期。就像 js 一样,它会先从局部作用域查找变量,依次向上级作用域查找。
3.嵌套:
十分真诚的说,三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别(也可能是我没发现)。Sass 除了常规的采用『&』替代父级选择器之外,还提供了「奇葩的属性嵌套」:
/*style.sass*/
.footer {
font: {
family: 微软雅黑;
size: 5rem;
weight: bolder;
}
}
除了少打几个字,感觉没啥用啊。
4.继承:
css 属性的继承是一个非常重要的特性,好消息是三种预编译器都对此做出了改善。
.shit {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .shit;/*继承.block*/
border: 1px solid #aaa;
}
ul,li {
@extend .shit; /*继承.block*/
color: #aaa;
}
将被编译成标准 css:
.shit,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #aaa
}
ul,li {
color:#aaa;
}
5.导入@Import:
CSS中,不建议用@import导入css,因为会增加http请求。但 CSS 预处理器中的导入和CSS的有hhe很大区别,它是将不同 css 是在语义上导入,最终编译结果会生成一个CSS文件。
值得注意的是,如果不同文件相互引入的时候,出现相同变量名时可能会引起错误。所以我的建议是单独有一个 var.sass/less/styl 文件来记录所有你定义的变量。
Less 为@Import 扩展了语法,而 Sass 和 Stylus 并没有。
个人认为: