预编译器Less、Sass、Stylus的一些整理

预编译器的出现

主要原因是CSS有几个缺点：

• 没变量。
• 不支持嵌套。
• 代码复用性较差。
• 编程能力较弱。

基本用法

Less:
@contentBG:red;
.centerBox{
    color:@contentBG;
}

Sass:
$contentBG:red;
.centerBox{
    color:$contentBG;
}

Stylus:
contentBG = red;
.centerBox
    color contentBG;

可以看到，less和sass在语法上基本一致，只是变量的定义符号有差别。而stylus不需要定义符号，更像是Python那样简洁的语法。

作用范围

Less：
@color: red;
.centerBox {
    color: @color;
}

@color: black;
.leftBox {
    color: @color;
}

/* 编译出来的CSS*/
.centerBox {
  color: black;
}

.leftBox {
  color: black;
}

less的作用范围不同于其他两个，如果出现了相同的变量定义，则会统一使用最后面定义的那个的值，即后定义的会覆盖前面定义的。这一特点应用在使用一些less组件库的时候会比较有用，当你想自定义一些组件库的某些属性时，可以直接覆盖掉，不会造成冲突。但是同时也会带来一定的隐患：如果不同的组件库或类库使用了相同的变量名，那么就会出现覆盖的情况，所以应该采用模块化的方式。

Sass：
$color: red;
.centerBox {
    color: $color;
}

$color: black;
.leftBox {
    color: $color;
}

Stylus：
color = red
.centerBox
    color color

color = black
.leftBox
    color color


/* 两者编译出来的CSS*/
.centerBox {
  color: red;
}

.leftBox {
  color: black;
}

sass和stylus会使用前面最近定义的变量。两者在为通过覆盖变量的值来自定义样式方面同样提供了一个解决方法,使用 !default。

Sass：
$a: 1;
$a: 5 !default;
$b: 3 !default;
// $a = 1, $b = 3

Stylus：
a = 1
a := 5 
b = 3
// a = 1, b = 3

意思就是如果之前不存在这个变量，那就用我现在定义的这个值。

嵌套进选择器以及属性

less:
@position:center;
@prop:background;

.@{position}-box{
    @{prop}-color:red;
}

sass:
$position:center;
$prop:background;

.#{$position}-box{
    #{$prop}-color:red;
}

stylus:
position = center
prop = background

.{position}-box
    {prop}-color red

mixin与继承

mixin

Less:
.mixin-style(@color:red){
    color:@color;
}

.content{
    .mixin-style(red);
}

Sass:
@mixin mixin-style{
    color:red;
}

.content {
    @include minxin-style;
}

Stylus:
mixin-style(color)
    color color
  
.content
    mixin-style red

继承

Stylus/Sass
.box{
    backgroundColor:red;
    height:180px;
    width:200px;
}

.centerBox{
    @extend .box;
    color:black;
}

Less:
.box{
    backgroundColor:red;
    height:180px;
    width:200px;
}

.centerBox{
    &:extend(.box);
    color:black;
}

stylus和sass是通过@extend的方式来实现继承的，less是通过伪类的方式实现继承的。