重大变化:无效的组合器

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:

SCSS Syntax

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

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.