Sass:Sass Nesting

Sass Nesting

Sass syntax provides the facility to nest one style inside another style.

Nesting

Nesting is the process of placing code within other blocks of code.

Let us understand it with the help of an example.

<style>
  <div class="container">
    <h2>Main Heading</h2>
    <p>Textual Content</p>
   </div> 
</style>

Here see the HTML skelton, <h2> and <p> tag both is nested inside the div having class .container.

Nesting in Sass

Let us understand it with the help of an example.

Sass Syntax:

<style>
 nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color:grey.
  }
}
</style>

The above-nested style is also known as descendant selectors.

After compilation of the above Sass styles, the following CSS code will be obtained:

General Syntax

Try it yourself

Source Code