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