为什么背景颜色只适用于父类？ [复制]

Question

这是一个在 SCSS 中绘制正方形的简单示例。为什么背景色只有在.color中才生效，.black不生效？

CodePen

<div class="color black"></div>

.color {
  width: 112px;
  height: 112px;
  display: block;
  // background: #000;
  .black {
    background: #000;
  }
}

Answer 1

因为.black 认为它是一个子元素。所以.black 部分正在寻找一个元素，它是.color 的子元素。

.color {
  width: 112px;
  height: 112px;
  display: block;
  // background: #000;
  .black {
    background: #000;
  }
}

如果你的 html 看起来像这样

<div class='color'>
    <div class='black'></div>
</div>

然后它会正常工作。

事实上，你需要一个& 在黑色前面。

.color {
  width: 112px;
  height: 112px;
  display: block;
  // background: #000;
  &.black {
    background: #000;
  }
}

这就像您期望的那样工作。