重大变更:严格的一元运算符
Sass 一直允许以模棱两可的方式使用 -
和 +
,导致作者无法明确它们是二元运算符还是一元运算符。这种令人困惑的语法已弃用。
此属性如何编译?
SCSS 语法
$size: 10px;
div {
margin: 15px -$size;
}
Sass 语法
$size: 10px
div
margin: 15px -$size
一些用户可能会说“-
附加到了 $size
,所以应该是 margin: 20px -10px
”。另一些用户可能会说“-
位于 20px
和 $size
之间,所以应该是 margin: 5px
”。Sass 当前同意后者的观点,但真正的问题是它一开始就如此令人困惑!这是 CSS 的空格分隔列表语法与 Sass 的算术语法相结合的自然但不幸的后果 。
这就是我们采取措施将其变为错误的原因。将来,如果你想使用二进制 -
或 +
运算符(即对两个数字进行减法或加法),则需要在两侧都放置空格或两侧都不放置空格 。
- 有效:
15px - $size
- 有效:
(15px)-$size
- 无效:
15px -$size
如果你想将一元 -
或 +
运算符用作空格分隔列表的一部分,则(仍然)需要用 括号将其括起来。
- 有效:
15px (-$size)
过渡期过渡期永久链接
- Dart Sass
- 自 1.55.0 起
- LibSass
- ✗
- Ruby Sass
- ✗
兼容性
我们将在 Dart Sass 2.0.0 中将其变为错误,但在那之前它只会发出弃用 警告。
💡 有趣的事实
记住,你可以禁止你无法控制的库发出的弃用警告!如果你正在使用命令行界面,则可以传递 --quiet-deps
标志,如果你正在使用 JavaScript API,则可以将 quietDeps
选项 设置为 true
。
自动迁移自动迁移永久链接
你可以使用 Sass 迁移器 自动更新你的样式表,以便在任何需要 -
或 +
运算符之后添加一个空格,这将保留这些 样式表的现有行为。
$ npm install -g sass-migrator
$ sass-migrator strict-unary **/*.scss