Cosa significa "&" in '& .sub-title' indica in scss?

Question

Sono un novizio di CSS e SCSS.

Nel codice seguente,

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

Cosa &. significa? È lo stesso della classe di nidificazione?

Answer 1

Il & concatena classe padre, con conseguente .title.sub-title (anziché .title .sub-title se il & è omesso).

Il risultato è che con la & corrisponde un elemento con entrambe le title e sub-title classi:

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

mentre senza il & sarebbe abbinare un discendente con classe sub-title di un elemento con classe title:

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