如何避免SCSS中@mixin导致的CSS代码重复？

你遇到的情况是Mixin的正常行为——@mixin本质是将代码片段复制到每个调用位置，所以每个包含它的选择器都会生成重复的样式。如果想让相同样式合并输出，有两种常用方案：

方案1：使用占位符选择器 + @extend #

占位符（%）是SCSS中专门用于复用且不会单独输出的选择器，配合@extend可以将多个选择器的相同样式合并：

// 定义占位符，不会单独输出到CSS
%btnhover {
    background-color: $bg-cl-blc;
    color: $txt-cl-ff;
}

.btn-base {
    font-size: 15px;
    &:hover {
        @extend %btnhover; // 继承占位符样式
    }
}

.btn-otln {
    font-size: 15px;
    &:hover {
        @extend %btnhover;
    }
}

生成的CSS会自动合并选择器，避免重复：

.btn-base:hover, .btn-otln:hover {
  background-color: #000;
  color: #fff;
}

.btn-base {
  font-size: 15px;
}

.btn-otln {
  font-size: 15px;
}

方案2：直接合并选择器 #

如果这两个按钮的基础样式和hover样式都高度相似，直接把它们的选择器写在一起更简洁：

$bg-cl-blc: #000;
$txt-cl-ff: #fff;

.btn-base, .btn-otln {
    font-size: 15px;
    &:hover {
        background-color: $bg-cl-blc;
        color: $txt-cl-ff;
    }
}

输出的CSS同样是合并后的规则，没有重复代码。

两种方案的适用场景 #

• 若hover样式需要在更多不同选择器中复用，优先用占位符+@extend，灵活性更高；
• 若只是这两个按钮共用样式，直接合并选择器代码更简洁，无需额外定义占位符。

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