SCSS - 为什么不允许规则`＆amp; -classA。＆amp; -classB`？

Question

我正在尝试组织我的css代码进入SCSS，我遇到了这个问题，这让我对它为什么会抛出错误感兴趣？

这里有一些示例代码：

<div class='bot'>
    <div class='bot-active bot-awake'>
        //...
    </div>
</div>

我的SCSS看起来像：

.bot {
    &-active {....}
    &-awake {....}

    // this will not work.
    &-active.&-awake {
        ...
    }
}

Answer 1

您可以使用interpolation #{}

所以

.bot {
    &-active {....}
    &-awake {....}

    // this will work.
    &-active#{&}-awake {
        ...
    }
}

将导致

.bot-active {
  ...
}
.bot-awake {
  ...
}
.bot-active.bot-awake {
  ...
}

https://www.sassmeister.com/gist/4b8eb66140de9da983650b41a6df66ae

演示