瞭解sass結構

Question

這是我的sass結構請解釋一下它的意思？

實際上我正在分析一個代碼結構。我無法低估結構。

.class-name{ 
    some styles.. 
    &.class-name2{ 
    some styles.. 
    } 
} 

Answer 1

&通知預處理器在嵌套類的前面添加父選擇器。

所以這個：

.class-name{ 
     background: blue 
     &.class-name2{ 
      background: red; 
     } 
} 

將編譯過：

.class-name {background: blue;} 
.class-name.class-name2 {background: red;} 

的用法是：

<div class="class-name">This background is blue</div> 

和

<div class="class-name class-name2">This background is red</div>