如何实现SCSS嵌套选择器的继承？

你遇到的核心问题在于：.button.primary是复合选择器（由.button和.primary组合而成），并非独立的.primary类。你之前的写法无效，原因有两个：

• @extend .primary：SCSS找不到独立定义的.primary选择器，自然无法继承；
• @extend .button.primary：这会生成input[type="submit"].primary（只有当submit按钮带有.primary类时才会生效），和你想要的「submit按钮本身就拥有.button.primary样式」的需求不符。

下面给你几种实用的解决方案：

方案1：使用混合宏（Mixin）推荐 #

混合宏可以把重复的样式封装起来，在需要的地方直接调用，灵活性最高：

// 封装.button.primary的样式为混合宏
@mixin button-primary-styles {
  background: #007bff;
  color: #fff;
  // 其他.button.primary的样式，比如border、hover效果等
}

.button {
  // 基础按钮样式
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &.primary {
    @include button-primary-styles;
  }
}

input[type="submit"] {
  @extend .button; // 继承基础按钮样式
  @include button-primary-styles; // 直接应用primary样式，无需额外加类
}

编译后的CSS会自动合并样式，最终效果就是input[type="submit"]同时拥有.button和.button.primary的所有样式。

方案2：使用占位符选择器（Placeholder Selector） #

如果你更习惯用@extend，可以用占位符封装共享样式（占位符不会出现在最终CSS里，只会被继承的选择器合并）：

// 用占位符定义共享的primary样式
%button-primary {
  background: #007bff;
  color: #fff;
  // 其他.button.primary的样式
}

.button {
  // 基础按钮样式
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &.primary {
    @extend %button-primary;
  }
}

input[type="submit"] {
  @extend .button;
  @extend %button-primary;
}

这种方案的编译结果和方案1完全一致，适合喜欢用继承逻辑的场景。

方案3：直接扩展复合选择器变体不推荐 #

如果你非要用@extend且不想提取样式，可以用@at-root强制把.button.primary的样式应用到input[type="submit"]本身，但写法较绕，可读性差：

.button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &.primary {
    background: #007bff;
    color: #fff;
  }
}

input[type="submit"] {
  @extend .button;
  // 强制把.button.primary的样式绑定到input[type="submit"]自身
  @at-root #{&} {
    @extend .button.primary;
  }
}

总体来说，方案1（混合宏）是最直观、最易维护的选择，推荐优先使用。

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