Compatibility (Name Interpolation):
LibSass, Ruby Sass, and older versions of Dart Sass don’t support interpolation in at-rule names. They do support interpolation in values.
Sass supports all the at-rules that are part of CSS proper. To stay flexible and forwards-compatible with future versions of CSS, Sass has general support that covers almost all at-rules by default. A CSS at-rule is written @<name> <value>
, @<name> { ... }
, or @<name> <value> { ... }
. The name must be an identifier, and the value (if one exists) can be pretty much anything. Both the name and the value can contain interpolation.
If a CSS at-rule is nested within a style rule, the two automatically swap positions so that the at-rule is at the top level of the CSS output and the style rule is within it. This makes it easy to add conditional styling without having to rewrite the style rule’s selector.
Compatibility (Range Syntax):
LibSass and older versions of Dart Sass and Ruby Sass don’t support media queries with features written in a range context. They do support other standard media queries.
The @media
rule does all of the above and more. In addition to allowing interpolation, it allows SassScript expressions to be used directly in the feature queries.
When possible, Sass will also merge media queries that are nested within one another to make it easier to support browsers that don’t yet natively support nested @media
rules.
@supports
@supports permalink
The @supports
rule also allows SassScript expressions to be used in the declaration queries.
@keyframes
@keyframes permalink
The @keyframes
rule works just like a general at-rule, except that its child rules must be valid keyframe rules (<number>%
, from
, or to
) rather than normal selectors.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4