重大变化：严格的一元运算符

Sass 历史上允许 - 和 + 的使用方式使得作者是否打算将它们作为二元或一元运算符变得模糊。这种令人困惑的语法已被弃用。

这个属性是如何编译的？

¥How is this property compiled?

SCSS Syntax

$size: 10px;

div {
  margin: 15px -$size;
}

Sass Syntax

$size: 10px

div
  margin: 15px -$size

有些用户可能会说“- 是连接到 $size 的，所以它应该是 margin: 20px -10px”。其他人可能会说“- 在 20px 和 $size 之间，所以应该是 margin: 5px”。 Sass 目前同意后一种观点，但真正的问题是它一开始就太令人困惑了！这是 CSS 的空格分隔列表语法与 Sass 的算术语法相结合的自然但不幸的结果。

¥Some users might say "the - is attached to $size, so it should be margin: 20px -10px". Others might say "the - is between 20px and $size, so it should be margin: 5px." Sass currently agrees with the latter opinion, but the real problem is that it’s so confusing in the first place! This is a natural but unfortunate consequence of CSS’s space-separated list syntax combined with Sass’s arithmetic syntax.

这就是为什么我们要努力将其定为错误。将来，如果你想使用二元 - 或 + 运算符（即两个数字相减或相加的运算符），则需要在两侧或两侧都添加空格：

¥That’s why we’re moving to make this an error. In the future, if you want to use a binary - or + operator (that is, one that subtracts or adds two numbers), you’ll need to put whitespace on both sides or on neither side:

  • 有效的：15px - $size

    ¥Valid: 15px - $size

  • 有效的：(15px)-$size

    ¥Valid: (15px)-$size

  • 无效的：15px -$size

    ¥Invalid: 15px -$size

如果你想使用一元 - 或 + 运算符作为空格分隔列表的一部分，你（仍然）需要将其括在括号中：

¥If you want to use a unary - or + operator as part of a space-separated list, you’ll (still) need to wrap it in parentheses:

  • 有效的：15px (-$size)

    ¥Valid: 15px (-$size)

过渡期过渡期 permalink

¥Transition Period

兼容性:
Dart Sass
since 1.55.0
LibSass
✗
Ruby Sass
✗

我们将在 Dart Sass 2.0.0 中将此设置为错误，但在此之前它只会发出弃用警告。

¥We’ll make this an error in Dart Sass 2.0.0, but until then it’ll just emit a deprecation warning.

💡 Fun fact:

Remember, you can silence deprecation warnings from libraries you don’t control! If you’re using the command-line interface you can pass the --quiet-deps flag, and if you’re using the JavaScript API you can set the quietDeps option to true.

自动迁移自动迁移 permalink

¥Automatic Migration

你可以使用 Sass 迁移器 自动更新样式表，在任何需要的 - 或 + 运算符后面添加一个空格，这将保留这些样式表的现有行为。

¥You can use the Sass migrator to automatically update your stylesheets to add a space after any - or + operators that need it, which will preserve the existing behavior of these stylesheets.

$ npm install -g sass-migrator
$ sass-migrator strict-unary **/*.scss