Less、Sass 和 Stylus 是 CSS 预处理器,PostCSS 是转换 CSS 工具的平台

Less

  • 变量:$ 标识符变量,使用 {} 插值
  • 嵌套:支持 { } 大括号嵌套
  • 混入器:支持 选择器 混入 或 使用 .selector(@param) 创建纯混入器
  • 扩展 / 继承 / 运算符 / @import:支持
  • 流程:支持 if 条件判断,支持 when 递归模拟循环
  • 映射:支持 @ 声明和使用 Map
  • 特有:提供 Less.js,直接在浏览器使用 Less

Sass

  • 变量:支持 $ 标识符变量,使用 #{} 插值
  • 嵌套:支持 { }大括号嵌套,支持缩进嵌套
  • 混入器:@mixin 创建 @include 使用
  • 扩展 / 继承 / 运算符 / @import:支持
  • 流程:支持 if else 条件判断,支持 for while each 循环
  • 映射:支持 $() 声明 Map,提供 map-get(map, key) map-keys(map) map-values(map) 等一系列方法操作 Map,支持遍历 Map
  • 特有:支持 compass ,内含 自动私有前缀 等一系列有用 Sass 模块,支持压缩输出

Stylus

  • 变量:支持 $ 标识符变量 和 赋值表达式变量,使用 {} 插值
  • 嵌套:支持 { } 大括号嵌套 和 缩进嵌套
  • 混入器:像函数一样创建和使用
  • 扩展 / 继承 / 运算符 / @import:支持
  • 流程:支持 if else unless 三元 条件判断,支持 for 循环
  • 映射:像 JS 一样创建和使用对象
  • 特有:支持中间件,自动分配函数变量,提供 JS API。支持压缩输出

PostCSS

  • 接受 CSS 文件,把 CSS 规则转换为抽象语法树
  • 提供 API 供插件调用,对 CSS 处理
  • 插件:支持 Autoprefixer 自动添加私有前缀、css-modules CSS 模块 stylelint CSS 语法检查等插件,PostCSSS 是工具的工具