在 scss 中嵌套两个级别不起作用答案

【问题标题】：Nesting with two levels in scss not working在 scss 中嵌套两个级别不起作用
【发布时间】：2022-07-14 22:15:38
【问题描述】：

假设我有一个页面显示情感和相应的文本。我想根据情绪的类型改变文本的颜色。我已经在文本类中进行了嵌套，但是 didn't apply the styles mentioned for the text alone。有没有办法做到这一点？

.emotion{
  display: flex;
  &__text {
    outline: 1px solid blue; // Not applied
    &--happy{
      color: rebeccapurple
    }
    &--sad{
      color: yellow
    }
  }
}

<div class="emotion">
  <span class="emotion__text--happy">
    Happy
  </span>
<!--   <span className="emotion__text__sad"></span>
  <span className="emotion__text__tears"></span>
  <span className="emotion__text__joy"></span> -->
  <span class="emotion__happy"> 
    ????
  </span>
</div>

【问题讨论】：

标签： html css sass

【解决方案1】：

你需要像这样在 html 中改变你的类

<span class="emotion__text--happy">

【讨论】：