css-preprocessors
what ?
预处理器是css 能够使用 变量、操作符、函数、mixins、interpolations 等类似于js 功能的一种语言。
目前比较常用是三种：SASS、less 、stylus 。
Why ?
css 是古老的、不完整的。(哪天要是CSS 自己支持这些，就不用这些啦！)创建函数、重复使用一个变量、继承，css 都是不支持的。对一些大型的、复杂的项目，维护是一个非常困难的事情。（一直重构真的不是好选择）
为了更好地书写css，css作出的努力有：将声明定义到一个个单独的文件中，然后在主文件中import 他们。
这种方式可以处理组件化的问题，但是无法解决代码复用和后期维护的问题。
又出现了另一个方法：面向对象CSS编程（OOCSS），在OOCSS 中，对一个元素声明一个或多个class名称。每种class名称生成一种样式，这样增加了class 的复用性，但是也增加了维护成本。（划分为颗粒级别的class）
预处理器可以在CSS中实现 可复用性、可维护性、和可扩展性。通过使用预处理器，你可以提高工作效率，减少项目的代码工作。
新的功能
和其他编程语言一样，预处理器有很多不同的语法，但都不是很分离的。所有的预处理器都支持原生css风格，并且她们的语法也和原生的css 一样。sass 和 stylus 都一些额外的样式。sass支持省略大括号和分号。（省略以后不好看，而且还不好维护）在stylus中你还可以省略冒号。这些功能在sass 和stylus 中都是可选的。
变量
- sass
$
$font-size: 16px;
div {
font-size: $font-size;
}
- less
@
@font-size: 16px;
div {
font-size: @font-size;
}
- stylus
=
font-size = 16px;
div
font-size: font-size
- css
div {
font-size: 16px;
}
嵌套 (最喜欢的功能点之一)
css 在子选择器中缺乏明显的继承关系。你必须另起一行，写父子选择器的关系。嵌套提供了一种类似于HTML的可视化的继承关系，增加了可读性。在一些情况下，嵌套扩展了属性的范围，形成了类似于“选择器链”的东西，它是非常智能的。
- sass
less 、stylus 都是一样的
$link-color: #999;
$link-hover: #229ed3;
ul {
margin: 0;
li {
float: left;
}
a {
color: $link-color;
}
}
- css
ul { margin: 0; }
ul li { float: left; }
ul a { color: #999; }
ul a:hover { color: #229ed3; }
Mixins(混合)
混合是根据一些参数或静态规则编译生成的一系列定义。利用他们，你可以非常容易的写出跨浏览器的渐变背景色 、CSS箭头等。
（感觉类似于函数）
- sass
@mixin bordered($width) {
border: $width solid #ddd;
$: hover {
border-color: #999;
}
}
h1 {
@include bordered(5px);
}
- less
.bordered (@width) {
border: @width solid #ddd;
&:hover {
border-color: #999;
}
}
h1 {
.bordered(5px);
}
- stylus
bordered(w)
border: n solid #ddd
&:hover
border-color: #999
h1
bordered(5px)
- css
h1 { border: 5px solid #ddd; }
h1:hover { border-color: #999; }
扩展
sass将会扩展extend 的选择器的每一个实例，包括它的子选择器和继承属性。在less 中，你可以通过加上“all”属性来扩展选择器的每个实例，或者你也可以只选择主要的实例。Extends也是链式的。
颜色操作
略，感觉不会去用。
If/Else 声明
- sass
@if lightness($color) > 30% {
background-color: black;
}
@else {
background-color: white;
}
- less
.mixin (@color) when (lightness(@color) > 30%) {
background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
background-color: white;
}
- stylus
完全跟js 的写法一样
if lightness(color) > 30%
background-color black
else
background-color white
循环
- 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
函数
三种都是一样的
1cm * 1em => 1 cm * em
2in * 3in => 6in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 5.181in
3in / 2in => 1.5in
Imports
都是一样的 @
(这个原生的css 就支持了)
结论
这里的三种CSS预处理器都或多或少有相似的特性。根据你的代码习惯选择一种吧。
参考文献：
https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus
