Open In App

CSS At-Rules

Improve
Improve
Like Article
Like
Save
Share
Report

Sass supports every at-rule that is a part of the proper CSS. In order to stay flexible and future-compatible with the upcoming versions of CSS, Sass has given general support that covers almost every at-rules by itself.
Syntax:




@<rule> <value>, @<rule> {
   ... 
}


OR




@<rule> <value> {
   ... 
}


The rule must always be an identifier, and the value (if it exists) can be anything. Both rules and values can have interpolation. If any CSS at-rule is nested inside a style rule, both of them swap their positions themselves so that the at-rule is at the top level of the CSS output and the style rule is inside it. This makes adding conditional styling easy to add without rewriting the style rule selector.

Example:




.gfg {
  margin: 4px;
  
  @media geeks { margin: 8px; }
}


Output:

.gfg {
  margin: 4px;
}
@media geeks {
  .gfg {
    margin: 8px;
  }
}

@media rule: In addition to allowing interpolation, @media rule allows Sass Script expressions to be used directly in the queries. Whenever possible, Sass also merges the media queries that are nested inside one another to make it easy for supporting browsers that don’t currently support the nested @media rules.

Example:




@media (hover: hover) {
  .gfg:hover {
    border: 4px solid green;
  
    @media (color) {
      border-color: black;
    }
  }
}


Output:

@media (hover: hover) {
  .gfg:hover {
    border: 4px solid green;
  }
}
@media (hover: hover) and (color)
{
  .gfg:hover {
    border-color: black;
  }
}

@supports rule: The @supports rule also allows the Sass Script expressions to be used in the declaration queries.
Example:




@mixin gfg {
  font-family: arial;
  @supports (font-family: geeks ) {
    font-family: geeks;
  }
}
  
.header {
  @include gfg;
}


Output:

.header {
  font-family: arial;
}
@supports (font-family: geeks) {
  .header {
    font-family: geeks;
  }
}

@keyframes rule: The @keyframes rule works just like any other general at-rule. The only difference being that its child rules should be some valid keyframe rules (%, from, or to) rather than any normal selectors.
Example:




@keyframes font-change {
  from {
    font-family: arial;
    color: black;
  }
  
  50% {
    font-family: sans;
    color: green;
  }
  
  to {
    font-family: algerian;
    color: cyan;
  }
}


Output:

@keyframes font-change {
  from {
    font-family: arial;
    color: black;
  }
  50% {
    font-family: sans;
    color: green;
  }
  to {
    font-family: algerian;
    color: cyan;
  }
}


Last Updated : 16 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads