为何要做CSS Pre-processors?
没有人做吃力不讨好的工作嘛，有了多种不同的CSS Pre-Processors那么代表着它们一定带来了不同好处，问题是，带来了什么好处呢？最吸引开发者的好处是什么？它们有什么异同呢？如果公司做技术选型的时候最好选择哪一种呢？
好处
- 浏览器前缀处理
- 复用的效率提升
- 变量
- mixin
- 嵌套书写，不用写重复的选择器
三个最知名的工具
- SASS
- SASS中文文档
- SASS中文参考手册
- 2007年诞生，最早
- ruby社区支持
- 基于Ruby开发（gem install sass）
- LESS
- 2009年诞生
- CSS语法
- 基于JS开发（npm install less）
- Twitter Bootstrap使用
- 问题：比起SASS的编程部分比较弱
- LESS中文
- Stylus
- 2010年诞生
- 基于JS开发（npm install stylus）
- 人气远不如SASS和LESS
- 极客学院Stylus教程
简单比较
| Features | SASS | Less | Stylus |
|---|---|---|---|
| 变量 | $开头 | @开头 | 变量和值之间用等号 |
| 学习成本 | 中等 | 相近CSS，最小 | 中等 |
| 语法 | 缩进式(3.0+支持{}) | {} | ？ |
| 作用域 | 没有全局变量 | 向上查找 | 向上查找 |
| mixin | @mixin+@include | 直接调用 | 直接调用 |
重点特性
mixin
sass
申明：@mixin
调用：@include
/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){ border:$borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { @include error();/*直接调用error mixins*/ } .login-error { @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/ } less
申明：对比sass，申明没有@mixin
调用：对比sass，调用没有@include
/*声明一个Mixin叫作“error”*/ .error(@borderWidth:2px){ border:@borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { .error();/*直接调用error mixins*/ } .login-error { .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/ } stylus
申明：对比less，申明的时候没有‘.’
调用：直接函数调用
/*声明一个Mixin叫作“error”*/ error(borderWidth=2px){ border:borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { error();/*直接调用error mixins*/ } .login-error { error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/ } 继承
sass && stylus
调用：@extend
生成代码：它是在父亲上直接把子选择器加上，所以代码没有冗余
.block { margin: 10px 5px; padding: 2px; } p { @extend .block;/*继承.block选择器下所有样式*/ border: 1px solid #eee; } ul,ol { @extend .block; /*继承.block选择器下所有样式*/ color: #333; text-transform: uppercase; } less
调用：直接
生成代码：它是copy的孩子的属性中，所以产生了冗余
.block { margin: 10px 5px; padding: 2px; } p { .block;/*继承.block选择器下所有样式*/ border: 1px solid #eee; } ul,ol { .block; /*继承.block选择器下所有样式*/ color: #333; text-transform: uppercase; } 颜色函数
sass
lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */ darken($color, 10%); /* 返回的颜色在$color基础上变暗10% */ saturate($color, 10%); /* 返回的颜色在$color基础上饱和度增加10% */ desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */ grayscale($color); /* 返回$color的灰度色*/ complement($color); /* 返回$color的补色 */ invert($color); /* 返回$color的反相色 */ mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/ saturate($color, $amount) desaturate($color, $amount) lighten($color, $amount) darken($color, $amount) adjust-hue($color, $amount) opacify($color, $amount) transparentize($color, $amount) mix($color1, $color2[, $amount]) grayscale($color) complement($color) less
lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */ darken(@color, 10%); /* 返回的颜色在@color基础上变暗10%*/ saturate(@color, 10%); /* 返回的颜色在@color基础上饱和度增加10% */ desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/ spin(@color, 10); /* 返回的颜色在@color基础上色调增加10 */ spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */ mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */ saturate(@color, @amount) desaturate(@color, @amount) lighten(@color, @amount) darken(@color, @amount) fadein(@color, @amount) fadeout(@color, @amount) fade(@color, @amount) spin(@color, @amount) mix(@color1, @color2, @weight) grayscale(@color) contrast(@color) stylus
lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */ darken(color, 10%); /* 返回的颜色在'color'基础上变暗10% */ saturate(color, 10%); /* 返回的颜色在'color'基础上饱和度增加10% */ desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */ red(color) green(color) blue(color) alpha(color) dark(color) light(color) hue(color) saturation(color) lightness(color) if
sass
.mixin (@color) when (lightness(@color) > 30%) { background-color: black; } .mixin (@color) when (lightness(@color) =<; 30%) { background-color: white; } less
@if lightness($color) > 30% { background-color: black; } @else { background-color: white; } stylus
if lightness(color) > 30% background-color black else background-color white for && loop
sass
@for $i from 1px to 3px { .border-#{i} { border: $i solid blue; } } less
.loop(@counter) when (@counter > 0){ .loop((@counter - 1)); .border-@{counter} { border: 1px * @counter solid blue; } } stylus
for num in (1..3) .border-{num} border 1px * num solid blue 导入
@import
原始文件
/* file.{type} */ body { background: #EEE; } 引用
@import "reset.css"; @import "file.{type}"; p { background: #0982C1; } & 选择父亲
section { margin:10px; nav { height:25px; a { color:#0982c1; &:hover { text-decoration:underline; } } } } Sass VS Scss
- Sass是（Syntactically Awesome StyleSheets），后缀
.sass文件 - Scss是（Sassy CSS），后缀
.scss文件
all features are available for both syntaxes
- Scss兼容CSS，语法类似，Less的学习和入手优势被抵消掉了
- CSS文件，直接就是合法的Scss文件
- Scss可以转化为Sass，相对容易
- Scss和Sass在功能上基本能做到1：1映射
结论
如果喜欢原生的CSS语法，选择less比较好上手，stylus用的人数不足，但是它其实部分兼容sass和less的开发者群体，一个全新的项目尝试一下新事物也没有问题，如果喜欢更强的功能那么就scss（变量作用域有点儿蛋疼）走起吧。
中国的互联网团队，用less稍微多点（知乎搜索的结果来看），国外的sass用户更多，而且文档、样例更加丰富。