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