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 supportinterpolation in at-rule names. They do support interpolation in values.

Sass supports all the at-rules that are part ofCSS proper. To stay flexible andforwards-compatible with future versions ofCSS, Sass has general support thatcovers almost all at-rules by default. ACSS at-rule is written@<name> <value>,@<name> { ... }, or@<name> <value> { ... }. The name must be anidentifier, and the value (if one exists) can be pretty much anything. Both thename and the value can containinterpolation.

Sass Playground

SCSS Syntax

@namespace svgurl(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 Playground

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

@charset"UTF-8";
@namespace svgurl(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:"👍";
}

If aCSS at-rule is nested within a style rule, the two automatically swappositions so that the at-rule is at the top level of theCSS output and thestyle rule is within it. This makes it easy to add conditional styling withouthaving to rewrite the style rule’s selector.

Sass Playground

SCSS Syntax

.print-only{
display: none;

@media print{display: block;}
}
Sass Playground

Sass Syntax

.print-only
display: none

@media print
display: block

CSS Output

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

@media@media permalink

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 mediaqueries with features written in arange context. They do support otherstandard media queries.

Sass Playground

SCSS Syntax

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

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 allowinginterpolation, it allowsSassScript expressions to be used directly in thefeature queries.

Sass Playground

SCSS Syntax

$layout-breakpoint-small: 960px;

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

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 oneanother to make it easier to support browsers that don’t yet natively supportnested@media rules.

Sass Playground

SCSS Syntax

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

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

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@supports permalink

The@supports rule also allowsSassScript expressions to be used inthe declaration queries.

Sass Playground

SCSS Syntax

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

.banner{
@include sticky-position;
}
Sass Playground

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@keyframes permalink

The@keyframes rule works just like a general at-rule, except that itschild rules must be valid keyframe rules (<number>%,from, orto) ratherthan normal selectors.

Sass Playground

SCSS Syntax

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

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

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

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%;
}
}