Skip to content
Related Articles

Related Articles

CSS At-Rules
  • Last Updated : 16 Jul, 2020
GeeksforGeeks - Summer Carnival Banner

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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :