html - SCSS - 为什么不允许规则 `&-classA.&-classB`？

Question

我正在尝试使用 SCSS 来组织我的 css 代码，但我遇到了这个问题，这让我很想知道它为什么会抛出错误？

这里是一些示例代码:

<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