重大变更：无效组合器

Sass 历史上对选择器中的前导、尾随和重复组合器的使用非常宽松。除了在嵌套中有用的情况外，这些组合器正在被弃用。

Sass 历史上支持三种无效的组合器使用方式：

前导组合器，如 + .error {color: red}。
尾随组合器，如 .error + {color: red}。
重复组合器，如 div > > .error {color: red}。

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

有一个主要的例外：前导和尾随组合器仍然可以用于嵌套目的。例如，以下仍然完全支持：

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax.sidebar > {
  .error {
    color: red;
  }
}

      
      Playground
    Sass Syntax.sidebar >
  .error
    color: red


CSS Output.sidebar > .error {
  color: red;
}

只有当选择器在嵌套解析后仍然具有前导或尾随组合器时，Sass 才会产生错误。而重复组合器则始终是错误的。

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

过渡期过渡期 permalink

Dart Sass: since 1.54.0
LibSass: ✗
Ruby Sass: ✗

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

💡 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.

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

Can I Silence the Warnings?Can I Silence the Warnings? permalink

Sass provides a powerful suite of options for managing which deprecation warnings you see and when.

Terse and Verbose ModeTerse and Verbose Mode permalink

By default, Sass runs in terse mode, where it will only print each type of deprecation warning five times before it silences additional warnings. This helps ensure that users know when they need to be aware of an upcoming breaking change without creating an overwhelming amount of console noise.

If you run Sass in verbose mode instead, it will print every deprecation warning it encounters. This can be useful for tracking the remaining work to be done when fixing deprecations. You can enable verbose mode using the --verbose flag on the command line, or the verbose option in the JavaScript API.

⚠️ Heads up!

When running from the JS API, Sass doesn’t share any information across compilations, so by default it’ll print five warnings for each stylesheet that’s compiled. However, you can fix this by writing (or asking the author of your favorite framework’s Sass plugin to write) a custom Logger that only prints five errors per deprecation and can be shared across multiple compilations.

Silencing Deprecations in DependenciesSilencing Deprecations in Dependencies permalink

Sometimes, your dependencies have deprecation warnings that you can’t do anything about. You can silence deprecation warnings from dependencies while still printing them for your app using the --quiet-deps flag on the command line, or the quietDeps option in the JavaScript API.

For the purposes of this flag, a "dependency" is any stylesheet that’s not just a series of relative loads from the entrypoint stylesheet. This means anything that comes from a load path, and most stylesheets loaded through custom importers.

Silencing Specific DeprecationsSilencing Specific Deprecations permalink

If you know that one particular deprecation isn’t a problem for you, you can silence warnings for that specific deprecation using the --silence-deprecation flag on the command line, or the silenceDeprecations option in the JavaScript API.