Breaking Change: Media Queries Level 4

Sass has added support for the CSS Media Queries Level 4 specification. This originally conflicted with some Sass-specific syntax, so this syntax was deprecated and is now interpreted according to the CSS standard.

Compatibility:
Dart Sass
since 1.56.0
LibSass
Ruby Sass

Because Sass supports almost any Sass expression in parenthesized media conditions, there were a few constructs whose meaning was changed by adding full support for Media Queries Level 4. Specifically:

  • @media (not (foo)) was historically interpreted by Sass as meaning @media (#{not (foo)}), and so compiled to @media (false).

  • @media ((foo) and (bar)) and @media ((foo) or (bar)) were similarly interpreted as SassScript’s logical operators, compiling to @media (bar) and @media (foo) respectively.

Fortunately, these came up very infrequently in practice.

Transition Period permalinkTransition Period

Compatibility:
Dart Sass
since 1.54.0
LibSass
Ruby Sass

First, we emitted deprecation warnings for the previous ambiguous cases. These will have suggestions for how to preserve the existing behavior or how to use the new CSS syntax.