Skip to content
Related Articles

Related Articles

CSS At-Rules
  • Last Updated : 16 Jul, 2020

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


OR

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

@keyframes font-change {
  from {
    font-family: arial;
    color: black;
  }
  50% {
    font-family: sans;
    color: green;
  }
  to {
    font-family: algerian;
    color: cyan;
  }
}
My Personal Notes arrow_drop_up
Recommended Articles
Page :