常用css预处理对比 -- sass、less、stylus

一、css预处理

        CSS预处理器是一种编程工具，用于加强CSS语言的功能和扩展其语法。它允许开发人员使用变量、嵌套规则、函数、混合、继承等高级功能来编写CSS样式表，并且可以通过编译器将这些增强的样式表转换成普通的CSS代码。常用有sass、less、stylus。

二、sass、less、stylus比较

1.基本语法

/* 基本语法 */

/************************************/
/* sass文件 */
/* style.sass 旧语法*/
h1
  color: #000000

/* style.scss 新语法 scss是sass的升级版*/
h1 {
  color: #000000;
}

/************************************/
/* less文件 */
/* style.less */
h1 {
  color: #000000;
}

/************************************/
/* stylus文件 */
/* style.styl 花括弧、分号、冒号 */
h1 {
  color: #000000;
}

/* style.styl 分号、冒号 */
h1
  color: #000000

/* style.styl  */
h1
  color #000000

2.变量

/* 变量 */

/************************************/
/* css 变量以 -- 开头，用 var 接收使用 */
/* :root是一个伪类，匹配文档根元素 */
:root {
    --base-color: #000;  // 全局变量
    --base-bg: var(--base-color);  // 嵌套变量
}
body {
    --info-color: blue;  // 局部变量
    color: var(--base-color);
    background-color: var(--base-bg);
    border-color: var(--info-color);
}

/************************************/
/* sass 变量以 $ 开头，变量和值之间使用 : 隔开 */
$baseColor: #000;
body {
    color: $baseColor;
}

/************************************/
/* less 变量以 @ 开头，变量和值之间使用 : 隔开 */
@baseColor: #000;
body {
    color: @baseColor;
}

/************************************/
/* stylus 变量不能以 @ 开头，变量和值之间使用 = 隔开 */
baseColor = #000
body {
    color: baseColor;
}

3.嵌套

/* 嵌套 sass、less、stylus 都支持这种写法 */

nav { 
    ul { 
       margin: 0; 
       padding: 0; 
    } 
    li { 
       display: inline-block; 
    } 
    a { 
       display: block; 
       padding: 6px 12px; 
       text-decoration: none; 
    } 
}

4.函数

/* 函数 sass、less、stylus都支持函数 */
/* lighten、darken只是举例的颜色函数 */

body {
    color: lighten(orange, 10%)
    background-color: darken(blue, 10%)
}

5.混合

/* 混合 */

/************************************/
/* sass 可以带参数，默认值用 : 隔开 */
@mixin borderStyle($width: 1px) {
    border: $width solid #000;
}
body {
    @include borderStyle(2px);
}

/************************************/
/* less 可以带参数，默认值用 : 隔开 */
.borderStyle(@width: 1px) {
    border: @width solid #000;
}
body {
    .borderStyle(2px);
}

/************************************/
/* stylus 可以带参数，默认值用 = 隔开 */
borderStyle(width= 1px) {
    border: width solid #000;
}
body {
    borderStyle(2px);
}

6.继承

/* 继承 */

/************************************/
/* sass 用 @extend */
.block {
    background-color: #000;
}
body {
    @extend .block
}

/************************************/
/* less 用 $:extend(继承的类) */
.block {
    background-color: #000;
}
body {
    &:extend(.block)
}

/************************************/
/* stylus 用 @extend */
.block {
    background-color: #000;
}
body {
    @extend .block
}

7.运算符

/* 运算符 sass、less、stylus都支持这种写法 */

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 80 * 10%;
}

8.导入

/* 导入 以 @import 开头，@import file.{type} */

/************************************/
/* a.css */
body {
    background-color: #000;
}

/************************************/
/* b.less */
body {
    background-color: #ccc;
}

/************************************/
/* c.less */
@import "a.css"
@import "b.less"
p {
    background-color: #f40;
}

/************************************/
/* c.less 文件的最终结果 */
body {
    background-color: #ccc;
}
p {
    background-color: #f40;
}

9.父选择器

/* 父选择器 sass、less、stylus都使用 & */

body {
    & p {
        background-color: #000;
    }
}

10.循环 

/* 循环 */

/************************************/
/* sass */
/* for循环 */
@for $i from 1 through 3 {
    .width#{$i} {
        width: $i * 10px;
    }
}

/* while循环 */
$i: 3;
@while $i > 0 {
    .item-#{$i} {
        width: (20px + $i);
    }
    $i: $i - 1;
}

/************************************/
/* less */
/* when 递归循环*/
.ww(@n, @i: 1) when (@i <= @n) {
    .w-@{i} {
        width: (@i * 1%)
    }
    .ww(@n, (@i + 1))
}
.ww(5)

/* each 循环 */
@arr: #fff, #111;
each(@arr, {
    @num: extract(@arr, @index);
    .bd-@{value} {
        border-bottom: "1px solid @{num}"
    }
})

/************************************/
/* stylus */
/* for循环 */
@for $i from 1 to 10 {
    .border-#{$i} { border-width: #{$i*2}; }
}

/* each循环 */
$colors: red, green, blue;
@each $color in $colors {
    .#{$color}-text { color: $color; }
}