CSS At-Rules

Compatibility (Name Interpolation):
Dart Sass
since 1.15.0
LibSass
Ruby Sass

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.

SCSS Syntax

@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";
}

Sass Syntax

@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"


CSS Output

@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";
}


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.

SCSS Syntax

.print-only {
  display: none;

  @media print { display: block; }
}



Sass Syntax

.print-only
  display: none

  @media print
    display: block



CSS Output

.print-only {
  display: none;
}
@media print {
  .print-only {
    display: block;
  }
}

@media

Compatibility (Range Syntax):
Dart Sass
since 1.11.0
LibSass
Ruby Sass
since 3.7.0

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.

SCSS Syntax

@media (width <= 700px) {
  body {
    background: green;
  }
}

Sass Syntax

@media (width <= 700px)
  body
    background: green


CSS Output

@media (width <= 700px) {
  body {
    background: green;
  }
}

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.

SCSS Syntax

$layout-breakpoint-small: 960px;

@media (min-width: $layout-breakpoint-small) {
  .hide-extra-small {
    display: none;
  }
}

Sass Syntax

$layout-breakpoint-small: 960px

@media (min-width: $layout-breakpoint-small)
  .hide-extra-small
    display: none


CSS Output

@media (min-width: 960px) {
  .hide-extra-small {
    display: none;
  }
}


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.

SCSS Syntax

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;

    @media (color) {
      border-color: #036;
    }
  }
}

Sass Syntax

@media (hover: hover)
  .button:hover
    border: 2px solid black

    @media (color)
      border-color: #036




CSS Output

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;
  }
}
@media (hover: hover) and (color) {
  .button:hover {
    border-color: #036;
  }
}

@supports

The @supports rule also allows SassScript expressions to be used in the declaration queries.

SCSS Syntax

@mixin sticky-position {
  position: fixed;
  @supports (position: sticky) {
    position: sticky;
  }
}

.banner {
  @include sticky-position;
}

Sass Syntax

@mixin sticky-position
  position: fixed
  @supports (position: sticky)
    position: sticky



.banner
  @include sticky-position

CSS Output

.banner {
  position: fixed;
}
@supports (position: sticky) {
  .banner {
    position: sticky;
  }
}


@keyframes

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.

SCSS Syntax

@keyframes slide-in {
  from {
    margin-left: 100%;
    width: 300%;
  }

  70% {
    margin-left: 90%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Sass Syntax

@keyframes slide-in
  from
    margin-left: 100%
    width: 300%


  70%
    margin-left: 90%
    width: 150%


  to
    margin-left: 0%
    width: 100%


CSS Output

@keyframes slide-in {
  from {
    margin-left: 100%;
    width: 300%;
  }
  70% {
    margin-left: 90%;
    width: 150%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}