Sass、Less、Stylus ​

Sass ​

Sass最初是一种Ruby语言的扩展，用于简化CSS的编写。

Sass提供2种语法，通过文件后缀区分：.sass、.scss

.sass ​

最初的版本使用的是一种基于缩进的语法，称为Sass缩进语法。目前已经不常用了。

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

.scss ​

后来，由于Sass缩进语法与CSS缩进语法的混淆，Sass的开发者引入了一种新的语法，称为SCSS语法，它是CSS的超集。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass 提供的编译器 node-sass 是基于C++开发的，在node环境中运行需要安装node-gyp依赖，这个安装过程往往比较缓慢，是我诟病它的主要问题。
这个问题在官方重写为dart-sass后得以解决，dart-sass是纯JavaScript实现的编译器，依赖更少体验更好。node-sass现在已经停止迭代。

Less ​

Less （Leaner Style Sheets）是基于JavaScript实现的 CSS 扩展语言。

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

Less 安装简单，语法相比Sass容易上手。

Stylus ​

Stylus作为后起之秀，结合了Sass和Less的优缺点，可以写出更简洁的CSS超集。

font-stack = Helvetica, sans-serif
primary-color = #333

body
  font: 100% font-stack
  color: primary-color

参考资料 ​

• Sass
• Less
• Stylus