SASS | Style Rules

Just like CSS, style rules are also the base of SASS. It is used similar to CSS. Select the elements to be styled using a selector and then declare it’s properties which further affects the look of those elements.

Example:
Sass Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

.header
  padding: 3px 10px
  font-size: 40px
  font-family: sans-serif
  border: 2px solid green

chevron_right


This would result in the following CSS output:

.header{
  padding: 3px 10px;
  font-size: 40px;
  font-family: sans-serif;
  border: 2px solid green;
}

But, the advantage as it is merely just repeating itself. SASS wishes to make your code easy, not just repeat itself. So, in SASS, you may avoid repeating the same selector again and again. You can easily write one style rule inside the other. SASS automatically do your desired job. This feature of SASS is known as nesting.

Example: Sass Code



filter_none

edit
close

play_arrow

link
brightness_4
code

navbar
  ul
    padding: 2px
    list-style: square
  
  li
    display: inline-block
  
  a
    display: block
    padding: 4px 10px
    font-family: sans-serif

chevron_right


This would result in the following CSS output:

navbar ul{
    padding: 2px;
    list-style: square;
}
navbar li{
    display: inline-block;
}
navbar a{
    display: block;
    padding: 4px 10px;
    font-family: sans-serif;
}

Nesting rules are quite useful, but sometimes they can create a large amount of CSS. The more you nest, the more bandwidth it takes to generate CSS, and the more work will be done by your browse to render it. Hence the selectors must be kept shallow.

Some more useful examples: Nested rules are quite useful for handling the selector lists. Selector lists refer to the list of selectors separated with commas. These are compiled as the following example:

SASS Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

.abc, .def
  ul, p
    padding: 2px
    font-family: sans-serif
    border: 1px

chevron_right


This would result in the following CSS output:

.abc ul, .abc p, .def ul, .def p {
    padding: 2px;
    font-family: sans-serif;
    border: 1px
}

Interpolation: In order to insert values like variables and functions into the selectors, you can use interpolation. Interpolation is very useful while creating mixins as it allows you to generate selectors from the parameters your users have provided.

Example: Sass Code

filter_none

edit
close

play_arrow

link
brightness_4
code

@mixin full-form($name, $glyph) 
    span.full-form-#{$name} 
    font-family: sans-serif
    padding: 4px
    border: 10px
    content: $glyph
@include full-form("GFG", "GeeksForGeeks")

chevron_right


This would result in the following CSS output:

span.full-form-GFG {
  font-family: sans-serif;
  padding: 4px;
  border: 10px;
  content: "GeeksForGeeks";
}

Sass only analyses selectors after interpolation is completely resolved, meaning you are safe to use interpolation for generating any part of the selector without worrying that it won’t work.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.