重大变化：无效的组合器

Sass 历来非常允许在选择器中使用前导、尾随和重复组合器。这些组合器已被弃用，除非它们可用于嵌套。

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

¥Sass has historically supported three invalid uses of combinators:

  • 领先的组合器，如 + .error {color: red} 中所示。

    ¥Leading combinators, as in + .error {color: red}.

  • 尾随组合器，如 .error + {color: red} 中所示。

    ¥Trailing combinators, as in .error + {color: red}.

  • 重复组合器，如 div > > .error {color: red} 中所示。

    ¥Repeated combinators, as in div > > .error {color: red}.

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

¥None of these are valid CSS, and all of them will cause browsers to ignore the style rule in question. Supporting them added a substantial amount of complexity to Sass’s implementation, and made it particularly difficult to fix various bugs related to the @extend rule. As such, we made the decision to remove support for these uses.

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

¥There is one major exception: leading and trailing combinators may still be used for nesting purposes. For example, the following is still very much supported:

Playground

SCSS Syntax

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

Sass Syntax

.sidebar >
  .error
    color: red

CSS Output

.sidebar > .error {
  color: red;
}

仅当解决嵌套后选择器仍然具有前导或尾随组合器时，Sass 才会产生错误。另一方面，重复的组合器总是会出现错误。

¥Sass will only produce an error if a selector still has a leading or trailing combinator after nesting is resolved. Repeated combinators, on the other hand, will always be errors.

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

¥To make sure existing stylesheets who (likely accidentally) contain invalid combinators, we’ll support a transition period until the next major release of Dart Sass.

过渡期过渡期 permalink

¥Transition Period

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

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

¥First, we’ll emit deprecation warnings for all double combinators, as well as leading or trailing combinators that end up in selectors after nesting is resolved.

💡 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() mixin 中使用。但是，我们不鼓励这种模式，并将在 Dart Sass 2.0.0 中放弃对它的支持。

¥In addition, we’ll immediately start omitting selectors that we know to be invalid CSS from the compiled CSS, with one exception: we won’t omit selectors that begin with a leading combinator, since they may be used from a nested @import rule or meta.load-css() mixin. However, we don’t encourage this pattern and will drop support for it in 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.