重大变更:严格的一元运算符

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