SASS Nested Rules and Nested Properties

SASS Nested Rules enables us to write nested rules using the curly braces to enclose the style rules for nested elements just like in HTML.

Nested rules make it easier to write CSS code and makes the style rules more readable.

In HTML, we have nested and visual hierarchy. For example, if we create a list, we use the <li> tag to create list items inside the <ul> or <ol> tag. But CSS doesn't support such nested syntax. So if we have to style a list and its items present in the sidebar of a webpage, with the following HTML code,

<div id="sidebar">
    <ul>
        <li>Tutorials</li>
        <li>Q & A Forum</li>
        <li>Flashcards</li>
        <li>Tests</li>
        <li>Collaborate</li>
    </ul>
</div>

We will write our CSS code as follows,

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar li {
    padding: 6px;
    margin-bottom: 10px;
    background-color: #10A2FF;
    color: #ffffff;
}

But in SASS/SCSS we can use the nested rules to do so in a more readable way,

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    li {
        padding: 6px;
        margin-bottom: 10px;
        background-color: #10A2FF;
        color: #ffffff;
    }
}

See, its better than CSS.

SASS Nested Properties

This is used whenever there are CSS properties that come under same namespaces. Consider background namespace in which we have properties such as:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

In the case of CSS, we need to type all these properties separately if we want to use them. But SCSS provides us the shorthand nested way which makes work much easier where we write the namespace followed by all the properties i.e. in a nested way.

Let's see an example,

body 
{
  background: 
   {
     color: yellow;
     attachment: fixed;
     repeat: no-repeat;
   }
}

This will be compiled to:

body 
{
  background-color: yellow;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

Similarly in the case of font namespace,

.funky 
{
  font: 
    {
      family: fantasy;
      size: 30em;
      weight: bold;
    }
}

This will be compiled to the following CSS code,

.funky 
{
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

Conclusion:

In this tutorial, we covered the concept of Nested Rules and Nested Properties in detail as this is a great feature that you must use while writing SCSS style code as this will make your work easier and will also make your stylesheet more readable and less bulky.