如何用SCSS正确为按钮声明两个类？现有代码失效求修复

嘿，我明白你遇到的问题了——你的SCSS嵌套逻辑搞错了选择器的关系！让我们一步步拆解问题，然后给出规范的修复方案：

问题根源 #

你的按钮 <button class="green current"></button> 是同一个元素同时拥有两个类，但你原来的SCSS写法把 .current 当成了 button.green 的子元素/后代元素来选择，这就导致样式永远不会作用到按钮本身：

• 第一种写法：.current 嵌套在 button.green 里，编译后是 button.green .current（作用于绿色按钮内部带current类的子元素）
• 第二种写法：& .current 编译后是 button .current（作用于button标签内部带current类的子元素）

这两种都不符合你的需求，因为current是按钮自身的类，不是后代元素的。

规范的SCSS修复写法 #

我们需要用SCSS的父选择器占位符 & 来表示当前的父选择器（也就是 button.green），然后直接拼接 .current，这样就能选中同时拥有两个类的button元素：

button.green {
  background-color: $green;
  // 用&连接.current，表示同一个元素同时拥有green和current类
  &.current {
    color: $white;
  }
}

这段代码编译后的CSS是：

button.green {
  background-color: [你的$green变量值];
}
button.green.current {
  color: [你的$white变量值];
}

另一种等价写法（更灵活） #

如果你想把button的基础样式和多类样式分开管理，也可以这样写：

button {
  // 单独定义green类的样式
  &.green {
    background-color: $green;
  }
  // 定义同时拥有green和current类的样式
  &.green.current {
    color: $white;
  }
}

这两种写法都能正确匹配你的按钮元素，让两个类的样式同时生效。

内容的提问来源于stack exchange，提问作者Sergino