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 是工具的工具