重大变更:无效组合器

从历史上看,Sass 对选择器中前导、尾随和重复组合器的使用非常宽容。这些组合器已被弃用,除非它们对嵌套有用。

从历史上看,Sass 支持三种无效的组合器用法

  • 前导组合器,如 + .error {color: red}

  • 尾随组合器,如 .error + {color: red}

  • 重复组合器,如 div > > .error {color: red}

这些都不是有效的 CSS,并且所有这些都将导致浏览器忽略相关样式规则。支持它们为 Sass 的实现增加了相当大的复杂性,并且使得修复与 @extend 规则相关的各种错误变得特别困难。因此,我们做出了移除对这些用法的支持的决定。

**有一个主要的例外**:前导和尾随组合器仍可用于嵌套目的。例如,以下内容仍然非常受支持

游乐场

SCSS 语法

.sidebar > {
  .error {
    color: red;
  }
}
游乐场

Sass 语法

.sidebar >
  .error
    color: red


CSS 输出

.sidebar > .error {
  color: red;
}


只有在嵌套解析后选择器仍然具有前导或尾随组合器时,Sass 才会产生错误。另一方面,重复组合器将始终是错误。

为了确保现有样式表(可能意外地)包含无效组合器,我们将支持过渡期,直到 Dart Sass 的下一个主要版本发布。

过渡期过渡期永久链接

兼容性
Dart Sass
自 1.54.0 起
LibSass
Ruby Sass

首先,我们将为所有双组合器以及在嵌套解析后最终出现在选择器中的前导或尾随组合器发出弃用警告。

💡 有趣的事实

请记住,您可以静默来自您无法控制的库的弃用警告!如果您使用的是命令行界面,则可以传递--quiet-deps 标志,如果您使用的是 JavaScript API,则可以将quietDeps 选项设置为 true

此外,我们将立即开始从编译后的 CSS 中省略我们知道是无效 CSS 的选择器,但有一个例外:我们不会省略以前导组合器开头的选择器,因为它们可能来自嵌套的 @import 规则或 meta.load-css() mixin。但是,我们不鼓励这种模式,并且将在 Dart Sass 2.0.0 中放弃对它的支持。

我可以静默警告吗?我可以静默警告吗?永久链接

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

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

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

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

⚠️ 注意!

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

静默依赖项中的弃用静默依赖项中的弃用永久链接

有时,您的依赖项具有您无能为力的弃用警告。您可以使用命令行上的--quiet-deps 标志或 JavaScript API 中的quietDeps 选项静默来自依赖项的弃用警告,同时仍然为您的应用程序打印它们。

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

静默特定弃用静默特定弃用永久链接

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