Was bedeutet "&." in '& .sub-title' zeigt in scss an?

Question

Ich bin ein Neuling für CSS und SCSS.

Im folgenden Code,

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

Was & tut. bedeutet? Ist es das Gleiche wie Nesting-Klasse?

Answer 1

Die & verkettet die übergeordnete Klasse, in .title.sub-title resultierende (statt .title .sub-title wenn die & weggelassen).

Das Ergebnis ist, dass mit den & sie paßt ein Element mit beiden title und sub-title Klassen:

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

während ohne die & wäre es einen Nachkomme mit Klasse entspricht sub-title ein Element mit Klasse title:

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