常用的css预编译技术有sass、less、Stylus，三者各有特点。
- sass：出现最早，需要依赖ruby，推荐使用scss的语法编写；
- less：可使用sass的语法，又兼容css的语法,相比简单易上手；
- Stylus：来自node社区，主要给node项目做预编译。
有关less
一、变量
可以定义通用的样式，需要时可以调用；全局样式调整可能仅需要改几行代码;
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
编译成css如下：
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
二、嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承，不仅减少了代码量，而且代码结构很清晰
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}