--- title: CSS At-Rules --- 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 `@ `, `@ { ... }`, or `@ { ... }`. The value (if one exists) can be pretty much anything, and can contain [interpolation][]. [interpolation]: ../interpolation <% example do %> @namespace svg url(http://www.w3.org/2000/svg); @font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"); } @counter-style thumbs { system: cyclic; symbols: "\1F44D"; } === @namespace svg url(http://www.w3.org/2000/svg) @font-face font-family: "Open Sans" src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2") @counter-style thumbs system: cyclic symbols: "\1F44D" <% end %> 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. <% example do %> .print-only { display: none; @media print { display: block; } } === .print-only display: none @media print display: block <% end %> ## `@media` <% impl_status dart: '1.11.0', libsass: false, ruby: '3.7.0' do %> 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. [range context]: https://www.w3.org/TR/mediaqueries-4/#mq-range-context <% example(autogen_css: false) do %> @media (width <= 700px) { body { background: green; } } === @media (width <= 700px) body background: green === @media (width <= 700px) { body { background: green; } } <% end %> <% end %> 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][]. [`@media` rule]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries [SassScript expressions]: ../syntax/structure#expressions [feature queries]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_features <% example do %> $layout-breakpoint-small: 960px; @media (min-width: $layout-breakpoint-small) { .hide-extra-small { display: none; } } === $layout-breakpoint-small: 960px @media (min-width: $layout-breakpoint-small) .hide-extra-small display: none <% end %> 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. <% example do %> @media (hover: hover) { .button:hover { border: 2px solid black; @media (color) { border-color: #036; } } } === @media (hover: hover) .button:hover border: 2px solid black @media (color) border-color: #036 <% end %> ## `@supports` The [`@supports` rule][] also allows [SassScript expressions][] to be used in the declaration queries. [`@supports` rule]: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports <% example do %> @mixin sticky-position { position: fixed; @supports (position: sticky) { position: sticky; } } .banner { @include sticky-position; } === @mixin sticky-position position: fixed @supports (position: sticky) position: sticky .banner @include sticky-position <% end %>