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