CSS 预处理器 Less Cass Stylus

Sass Less Stylus

安装

$ npm install -g less

$ gem install sass

$ npm install -g stylus

Less

导入

@import "main";      // main.less 如果为 less 文件，后缀可省略
@import "typo.css";

变量

@a: 1;

#header{
  color: @a;
  // comments

 /**
   * comments
  */
}

混合

嵌套

运算

@a: 5cm - 1cm;

// + - * /

内置函数

作用域

Sass

有两种格式的后缀名，这里以 .scss 后缀为例