Sass Nesting

Sass nesting 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.

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

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:

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

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: grey;
  }
}
   
  

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 now

Source Code

          <style>

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

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  color:grey;
}

</style>

Try it now

Sass Nesting

Nesting

Nesting in Sass

Web Tutorials