css 预处理器：Sass、Less 和 Stylus
【Sass】
扩展名：「 *.sass 」和「 *.scss 」
/*style.sass*/
h1
color: #666
background-color: #666
- 变量: 必须是『$』开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。
.wrapper {
overflow-y: hidden;
line-height: 1.5;
max-height: 4.5em; /* = 1.5 x 3 */
}
-----------------------------------
.wrapper
$max-lines = 3
$line-height = 1.5
overflow-y: hidden
line-height: $line-height
max-height: unit($line-height * $max-lines, 'em')
- 作用域：不存在全局变量的概念
- 嵌套：采用『&』替代父级选择器；「奇葩的属性嵌套」
/*style.sass*/
.footer {
font: {
family: 微软雅黑;
size: 5rem;
weight: bolder;
}
}
- 继承:『@extend』
.shit {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .shit;/*继承.block*/
border: 1px solid #aaa;
}
ul,li {
@extend .shit; /*继承.block*/
color: #aaa;
}
【Less】
扩展名：「 *.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。
- 作用域：逐级查找，向上冒泡
- 继承: 不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面
【Stylus】
扩展名：「 *.styl 」
- 同时支持缩进的和通俗的两种风格的 CSS 语法风格
- 变量: 没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。不要使用『@』声明变量，Stylus会进行编译，但不会赋值给变量
- 作用域：完全等同 Less。Stylus 和 Sass 则更倾向于指令式
- 继承:『@extend』,等同 Sass
