2023-05-25 00:58:09 +02:00
|
|
|
---
|
2023-05-26 00:24:38 +02:00
|
|
|
title: 'Breaking Change: Media Queries Level 4'
|
2023-05-25 00:58:09 +02:00
|
|
|
introduction: >
|
|
|
|
|
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.
|
|
|
|
|
---
|
|
|
|
|
|
2023-06-01 17:43:54 +02:00
|
|
|
{% compatibility 'dart: 1.56.0', 'libsass: false', 'ruby: false' %}{% endcompatibility %}
|
2023-05-25 00:58:09 +02:00
|
|
|
|
|
|
|
|
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:
|
|
|
|
|
|
2023-05-26 00:24:38 +02:00
|
|
|
- `@media (not (foo))` was historically interpreted by Sass as meaning
|
2023-05-25 00:58:09 +02:00
|
|
|
`@media (#{not (foo)})`, and so compiled to `@media (false)`.
|
|
|
|
|
|
2023-05-26 00:24:38 +02:00
|
|
|
- `@media ((foo) and (bar))` and `@media ((foo) or (bar))` were similarly
|
2023-05-25 00:58:09 +02:00
|
|
|
interpreted as SassScript's logical operators, compiling to `@media (bar)` and
|
|
|
|
|
`@media (foo)` respectively.
|
|
|
|
|
|
|
|
|
|
Fortunately, these came up very infrequently in practice.
|
|
|
|
|
|
|
|
|
|
## Transition Period
|
|
|
|
|
|
2023-06-01 17:43:54 +02:00
|
|
|
{% compatibility 'dart: 1.54.0', 'libsass: false', 'ruby: false' %}{% endcompatibility %}
|
2023-05-25 00:58:09 +02:00
|
|
|
|
|
|
|
|
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.
|
