SASS | Anidamiento

SASS Nesting hace que nuestro trabajo sea muy eficiente, no tenemos que repetir los selectores externos una y otra vez. Podemos escribir selectores anidados en el orden en que aparecen en el archivo HTML (es decir, formulario de selector primario-externo y secundario-interno). SASS hará automáticamente el trabajo de combinación.

Vea el ejemplo a continuación:
Archivo SASS:

ul {
    list-style-type: none;

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

Archivo CSS compilado:

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 también permite anidar selectores con diferentes combinadores. Puede colocar combinadores al comienzo del selector interno o al final del selector externo o en medio de dos.

Vea el ejemplo a continuación:
Archivo SASS:

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

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

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

Archivo CSS compilado:

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