sass 有多个版本，目前官方主推的是 dart-sass，因为 dart 在处理大型样式表的时候性能更佳。dart-sass 没有支持完整的 sass 语法功能。今天在使用 sass 的颜色运算的时候，发现 webpack 报错，一时摸不着头脑。搜索报错信息，也得不到什么相关信息。后来在 dart-sass 的 github 主页才发现原来 dart-sass 并不支持颜色的通道运算，以下是 dart-sass 与 ruby-sass 的主要不同点。
- @extend 仅仅接收一个选择器，并且将其作为 selector-extend() 的第二个参数
1
2
3
4
5
6
7
8
9
10
11
12
13
| .a {
x: y;
}
.b {
x: y;
}
.a.b {
x: y;
}
.c {
@extend .a.b;
}
|
- 增加了对于 :has() 伪类的支持
- 缩进语法 (sass) 更灵活，不再要求全部文档保持同样的缩进
- 颜色不支持通道运算
- 无单位的数字不再 == 有单位的数字，map 的 键值比对遵循同样的逻辑
- rgba() and hsla() 的百分比单位只支持百分比的形式
1
2
3
4
| .card{ color: rgba(255,255,255,0.5); }
should fail, but
.card{ color: rgba(255,255,255,50%); }
should pass
|
- 给函数传递多于函数定义的参数数量会导致错误
- 支持 :maches()
- selector-unify() 的结果现在具有对称性
- 只支持 UTF-8 格式的文档