SASS | Selector de padres

El selector principal es un tipo especial de selector en SASS, que nos permite reutilizar el selector externo (principal) de manera eficiente. Vea el siguiente ejemplo para hacerse una idea:

Por ejemplo: supongamos que tenemos el siguiente bloque de estilo CSS,

a {
    text-decoration: none;
    display: inline-block;
    background-color: lightgray;
}

Ahora, desea agregar un efecto de desplazamiento al bloque de anclaje, luego escribirá

a:hover {
    background-color: gray;
}

Usando SASS no necesita repetir el selector externo (a), o puede hacer lo siguiente:
Archivo SASS:

a {
    text-decoration: none;
    display: inline-block;
    background-color: lightgray;

    &:hover {
        background-color: gray;
    }
}

Aquí & se llama selector principal. El archivo CSS compilado será el mismo que nuestro estilo CSS.

Archivo CSS compilado:

a {
    text-decoration: none;
    display: inline-block;
    background-color: lightgray;
}

a:hover {
    background-color: gray;
}

ventajas:

1. Puede crear nuevas clases con prefijo o sufijo como el nombre del selector principal, lo que nos permite escribir
   un estilo CSS muy estructurado, de manera muy eficiente.

   Archivo SCSS:

   .main-block {
       border: 1px solid black;
       position: relative;
   
       &_subblock1 {
           position: absolute;
           display: block;
       }
   
       &_subblock2 {
           position: absolute;
           display: inline-block;
       }
   
   }
           

   Archivo CSS compilado:

   .main-block {
     border: 1px solid black;
     position: relative;
   }
   
   .main-block_subblock1 {
     position: absolute;
     display: block;
   }
   
   .main-block_subblock2 {
     position: absolute;
     display: inline-block;
   }
   
           

2. Puede usar diferentes pseudoclases o pseudoelementos para agregar estilos en el selector externo (principal). Vea en el
   primer ejemplo que hemos usado :hover pseudo-clase para agregar efecto en la etiqueta de anclaje con el selector principal.