Co oznacza "&." w "& .sub-title" wskazuje w scss?

Question

Jestem początkującym w CSS i SCSS.

W poniższym kodzie

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

Co &. oznacza? Czy to jest to samo co klasa gniazdowania?

Answer 1

The łączy klasę nadrzędną, co daje w wyniku .title.sub-title (zamiast .title .sub-title, jeśli pominięto &).

Rezultatem jest to, że z & pasuje element z obu title i sub-title klas:

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

podczas gdy bez & byłoby dopasować potomka z klasą sub-title elementu z klasą title:

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