html

How to Nest rules and properties in Sass?

Sass acronym for Syntactically Awesome Stylesheet is a pre-processor and extension of CSS that works well with all the versions of CSS. It is well-known for its clean and well-structured syntax that as a result enhances the capability of the basic language. Sass facilitates its users by supporting the usage of variables, nesting, mixins, inheritance, etc. The subject under discussion in this article is nesting in Sass. Here we will demonstrate how you can nest rules and properties in Sass.

How to nest rules in Sass

Nesting is regarded as the procedure of combining various rules. Sass allows its users to nest rules, preventing from writing outer selectors over and over again, thereby, making the code clear and more readable than basic CSS.

Example
The example demonstrated below shows how nesting in Sass is done.

HTML

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="sass.css">
<body>

<div>
   <ul>
    <li>Home</li>>
    <li>Services</li>
    <li>About Us</li>
    <li>Contact Us</li>
   </ul>
</div>

</body>
</html>

In the above code, we are creating a sidebar by making a div container and nesting an unordered list inside it. Moreover, we have also provided the link of the CSS file generated after compiling our Sass file to the href attribute of the <link> tag.

Sass

div {
  float:left;
  width: 25%;
  background-color: rosybrown;
  padding: 25px 15px;

  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
 
  li {
      padding: 8px;
      margin-bottom: 15px;
      background-color: plum;
      color: white;
  }
}

Now you will notice that in the Sass file we are first styling our div container and then nesting our selectors ul, and li inside the div selector. However, the same code above in standard CSS would look something like this.

CSS

div {
  float: left;
  width: 25%;
  background-color: rosybrown;
  padding: 25px 15px;
}

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

div li {
  padding: 8px;
  margin-bottom: 15px;
  background-color: plum;
  color: white;
}

In the above code, you will see that we have to use the div selector with every other selector to style our various elements. In CSS, you cannot nest selectors/rules inside one another rather you have to define them one by one.

This is the advantage that Sass has over CSS that it prevents its users from repeating redundant selectors making the code clear and more readable. The output of the above example is shown below.

Output

A sidebar was generated and styled using nesting in Sass.

How to nest properties in Sass

Another advantage of Sass is that it also allows the nesting of properties. You must have noticed that the prefix of various CSS properties is the same such as, font-size, font-family, font-weight, etc. The prefix font is the same in these properties.

Now to avoid using this prefix again and again in your stylesheet you can nest these properties in Sass. You must be wondering how to do it. Consult the example below.

Example
This example shows how to nest properties in Sass.

HTML

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="sass.css">
<body>


<p>This is some paragraph.</p>

</body>
</html>

In the above code, we have simply created a paragraph.

Sass

body{
  background:
  {
    color: pink;
    attachment: fixed;
  }
}
p{
  font:
  {
    family: Verdana;
    size: 20px;
    weight: bold;
  }
}

Now you will notice in the above code that when styling our elements with various CSS properties we wrote the prefix once and then nested the properties related to that prefix inside the selector. This way we avoided writing the same prefix over and over again.

CSS

This is the transpiled CSS output.

Output

Elements were successfully styled using nesting in Sass.

Conclusion

For the purpose of nesting rules in Sass you just have to write the outer selector once and nest the rest of the selectors inside it. Meanwhile, nesting properties in Sass allows you to write the prefix of properties once and nest the related properties inside it. Nesting rules and properties in Sass prevents you from writing redundant CSS values repeatedly thus making your code clear and more readable. This article guides you on how to nest rules and properties in Sass.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.