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

【问题标题】：How to declare two classes for element with scss如何使用 scss 为元素声明两个类
【发布时间】：2019-07-12 20:57:51
【问题描述】：

我有这个 scss 代码：

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

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

也试过了，但没有运气：

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

【问题讨论】：

【解决方案1】：

几乎正确，嵌套中缺少“&”以连接 button.green 和 .current。

你的 scss 的 css 输出是：

button.green > .current

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

正确：

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

哪些输出：

button.green.current

【讨论】：

【解决方案2】：

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

这将适用于两个类！！

【讨论】：