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 PeriodTransition Period permalink

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.