如何使用scss为元素声明两个类

Question

我有这个scss代码：

button.green{
  background-color: $green;
  .current {
    color: $white;
  }
}

我想对按钮<button class="green current"></button>应用两个类，但是我的scss代码不起作用。您将如何以适当的scss方式解决该问题？

也没有运气尝试过

button {
  .green{
    background-color: $green;
  }
  & .current {
    color: $white;
  }
}

Answer 1

几乎正确，在连接按钮，绿色和.current的嵌套中缺少“＆”。

您的scss的css输出为：

button.green > .current

意思是，您在元素“当前”的父元素“ button.green”中设置样式。

正确：

button.green{
  background-color: $green;
  &.current {
    color: $white;
  }
}

哪个输出：

button.green.current

Answer 2

.green.current {
     background-color: $green;
     color: $white;
}

这将同时适用于两个班级！