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

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

我可以关闭警告吗?我可以关闭警告吗? 链接

Sass 提供了一套强大的选项来管理您看到的弃用警告以及何时看到。

简洁和详细模式简洁和详细模式 链接

默认情况下,Sass 以简洁模式运行,其中它只会打印每种类型的弃用警告五次,然后它会静默其他警告。这有助于确保用户在需要了解即将发生的重大更改时知道,而不会产生过多的控制台噪音。

如果您改为以详细模式运行 Sass,它将打印遇到的每个弃用警告。这对于跟踪修复弃用时需要完成的工作很有用。您可以使用命令行上的 --verbose 标志 或 JavaScript API 中的 verbose 选项 启用详细模式。

⚠️ 注意!

JS API 运行时,Sass 不会在编译之间共享任何信息,因此默认情况下,它会为编译的每个样式表打印五个警告。但是,您可以通过编写(或要求您最喜欢的框架的 Sass 插件的作者编写)一个 自定义 Logger 来修复此问题,该 Logger 仅打印每个弃用五个错误,并且可以在多个编译之间共享。

关闭依赖项中的弃用关闭依赖项中的弃用 链接

有时,您的依赖项具有您无法解决的弃用警告。您可以使用命令行上的 --quiet-deps 标志 或 JavaScript API 中的 quietDeps 选项 关闭依赖项中的弃用警告,同时仍为您的应用程序打印这些警告。

出于此标志的目的,“依赖项”是指任何不仅仅是从入口点样式表进行一系列相对加载的样式表。这意味着来自加载路径的任何内容,以及通过自定义导入器加载的大多数样式表。

关闭特定弃用关闭特定弃用 链接

如果您知道某个特定弃用对您来说不是问题,则可以使用命令行上的 --silence-deprecation 标志 或 JavaScript API 中的 silenceDeprecations 选项 关闭该特定弃用的警告。