Breaking Change: Invalid Combinators

Sass has historically been very permissive about the use of leading, trailing, and repeated combinators in selectors. These combinators are being deprecated except where they’re useful for nesting.

Sass has historically supported three invalid uses of combinators:

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

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

  • Repeated combinators, as indiv > > .error {color: red}.

None of these are validCSS, and all of them will cause browsers to ignore thestyle rule in question. Supporting them added a substantial amount of complexityto Sass’s implementation, and made it particularly difficult to fix various bugsrelated to the@extend rule. As such, wemade the decision to remove supportfor these uses.

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

Sass Playground

SCSS Syntax

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

Sass Syntax

.sidebar >
.error
color: red

CSS Output

.sidebar > .error{
color: red;
}

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

To make sure existing stylesheets who (likely accidentally) contain invalidcombinators, we’ll support a transition period until the next major release ofDart Sass.

Transition PeriodTransition Period permalink

Compatibility:
Dart Sass
since 1.54.0
LibSass
✗
Ruby Sass
✗

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

💡 Fun fact:

Remember, you can silence deprecation warnings from libraries you don’tcontrol! If you’re using the command-line interface you can pass the--quiet-deps flag, and if you’re using the JavaScriptAPI you can set thequietDeps option totrue.

In addition, we’ll immediately start omitting selectors that we know to beinvalidCSS from the compiledCSS, with one exception: wewon’t omit selectorsthat begin with a leading combinator, since they may be used from a nested@import rule ormeta.load-css() mixin. However, we don’t encourage thispattern 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 deprecationwarnings 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 ofdeprecation warning five times before it silences additional warnings. Thishelps ensure that users know when they need to be aware of an upcoming breakingchange without creating an overwhelming amount of console noise.

If you run Sass in verbose mode instead, it will printevery deprecationwarning it encounters. This can be useful for tracking the remaining work to bedone when fixing deprecations. You can enable verbose mode usingthe--verbose flag on the command line, ortheverbose option in the JavaScript API.

⚠️ Heads up!

When running from theJSAPI, Sass doesn’t share any information acrosscompilations, so by default it’ll print five warnings foreach stylesheetthat’s compiled. However, you can fix this by writing (or asking the author ofyour favorite framework’s Sass plugin to write) acustomLogger that onlyprints 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 doanything about. You can silence deprecation warnings from dependencies whilestill printing them for your app usingthe--quiet-deps flag on the command line, orthequietDeps option in the JavaScript API.

For the purposes of this flag, a "dependency" is any stylesheet that’s not justa series of relative loads from the entrypoint stylesheet. This means anythingthat 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 cansilence warnings for that specific deprecation usingthe--silence-deprecation flag on the command line, orthesilenceDeprecations option in the JavaScript API.