SASS | Nesting

SASS Nesting makes our work very efficient, we don’t have to repeat outer selectors again and again. We can write nested selectors in the order they appear in the HTML file (i.e., Parent-Outer and Child-Inner Selector form ). SASS will automatically do the work of combining.

See the example below:
SASS file:

ul {
    list-style-type: none;

    li {
        display: inline-block;
        
        a {
            text-decoration: none;
            display: inline-block;
            padding: 10px 15px; 
            color: blue;
        }
    }
}

Compiled CSS file:

ul {
    list-style-type: none;
}

ul li {
   display: inline-block;
}

ul li a {
    text-decoration: none;
    display: inline-block;
    padding: 10px 15px;
    color: blue;
}

SASS also allows nesting of selectors with different combinators. You can put combinators either at the start of the inner selector or at the end of the outer selector or in the middle of two.

See the example below:
SASS file:

ul { 
    + li {
        display: inline-block;
    }
}

li {
    > {
        a {
            text-decoration: none;
        }   
    }
}

p ~ {
    span {
        text-decoration-line: underline;
        text-decoration-style: double;
    }
}

Compiled CSS file:

ul + li {
    display: inline-block;
}
  
li > a {
    text-decoration: none;
}
  
p ~ span {
    text-decoration-line: underline;
    text-decoration-style: double;
}