¿Qué significa '&.' en '& .sub-title' indica en scss?

Question

Soy un novato en CSS y SCSS.

En el siguiente código,

.title { 
    width: 718px; 
    &.sub-title { 
     width: 938px; 
    } 
} 

Lo que hace &. significa? ¿Es lo mismo que anidar?

Answer 1

El & concatena la clase padre, lo que resulta en .title.sub-title (en lugar de .title .sub-title Si se omite el &).

El resultado es que con la & que coincide con un elemento con dos title y sub-title clases:

<div class='title sub-title'></div> <!-- << match --> 

, mientras que sin el & que se correspondería con un descendiente con la clase sub-title de un elemento con clase title:

<div class='title'> 
    ... 
    <div class='sub-title'></div> <!-- << match --> 
    ... 
</div>