Open In App

SASS | Style Rules

Improve
Improve
Like Article
Like
Save
Share
Report

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:




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


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




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


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:




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


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




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


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.



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