了解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>