Sass中如何让扩展按钮类继承--icon修饰符？

当然可以不用在每个按钮类里重复编写--icon修饰符，你之前的尝试无效是因为：@extend只会继承目标选择器（.btn）的直接样式，不会继承其内部嵌套的&--icon规则，所以只有.btn--icon会生效，其他按钮变体的修饰符类不会被匹配。

下面给你两种可行的解决方案：

方案一：用SCSS循环批量生成（推荐） #

这种方法通过定义按钮变体的配置，自动生成所有按钮类和对应的--icon修饰符类，完全不用重复代码：

// 基础按钮样式
.btn {
    height: var(--btn-height-base);
    padding: 0 10px;

    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

// 定义所有按钮变体的样式配置
$button-variants: (
    primary: (
        normal-bg: var(--color-brand),
        normal-color: var(--txt-white),
        active-bg: var(--color-brand-active),
        active-color: var(--txt-white)
    ),
    border: (
        // 这里填border按钮的样式配置，比如：
        normal-bg: transparent,
        normal-color: var(--color-brand),
        active-bg: var(--color-brand-light),
        active-color: var(--color-brand)
    )
);

// 循环生成按钮类和对应的icon修饰符
@each $variant-name, $styles in $button-variants {
    // 生成基础按钮变体类
    .btn-#{$variant-name} {
        @extend .btn;
        background: map-get($styles, normal-bg);
        color: map-get($styles, normal-color);

        &:active, &:hover {
            background: map-get($styles, active-bg);
            color: map-get($styles, active-color);
        }
    }

    // 自动生成该变体的icon修饰符类
    .btn-#{$variant-name}--icon {
        @extend .btn-#{$variant-name};
        gap: 6px;
    }
}

这样写之后，.btn-primary--icon、.btn-border--icon这些类会自动继承对应基础按钮的所有样式，同时带上gap: 6px，HTML里直接用单个类就行，比如：<button class="btn-primary--icon">带图标的主按钮</button>。

方案二：用属性选择器匹配（适合不想重构现有代码） #

如果你的按钮类已经写好了，不想改成循环的结构，可以用属性选择器匹配所有btn-*--icon格式的类，直接添加gap样式：

// 基础按钮样式不变
.btn {
    height: var(--btn-height-base);
    padding: 0 10px;

    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

// 原有按钮变体类不变
.btn-primary {
    @extend .btn;
    background: var(--color-brand);
    color: var(--txt-white);

    &:active, &:hover {
        background: var(--color-brand-active);
        color: var(--txt-white);
    }
}

// 通用icon修饰符规则
[class^="btn-"]--icon, .btn--icon {
    gap: 6px;
}

注意这种方式需要HTML里同时添加基础按钮类和修饰符类，比如：<button class="btn-primary btn-primary--icon">带图标的主按钮</button>，因为.btn-primary--icon本身不会继承.btn-primary的样式，只是补充gap属性。

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