我完全懂你现在的困扰——明明想把mixin和extend的样式都打包到同一个类里，结果Sass却输出了两个独立的规则块。别担心，咱们可以通过几种实用的方式来解决这个问题：

方法一：把@extend整合到mixin内部 #

如果你的按钮结构和颜色样式是强关联的，直接把占位符的继承逻辑放到mixin里是最直接的方案。这样调用mixin时，所有样式都会被合并到同一个选择器下：

// 定义颜色占位符
%red-color {
  color: red;
}

// 重构mixin，加入extend逻辑
@mixin btn-structure {
  @extend %red-color;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

// 使用mixin
.btn {
  @include btn-structure;
}

编译后的CSS会是合并后的单个规则：

.btn {
  color: red;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

方法二：升级到最新版Dart Sass #

如果你希望保留mixin和extend分开的写法，可以检查下你的Sass版本。旧版的LibSass（比如Node Sass）不会自动合并相同选择器的独立规则，但**Dart Sass（目前官方推荐的Sass实现）**默认会自动合并这些重复的选择器块。

比如你原来的写法：

%red-color {
  color: red;
}

@mixin btn-structure {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

.btn {
  @include btn-structure;
  @extend %red-color;
}

用Dart Sass编译后，输出的CSS会自动合并成：

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: red;
}

方法三：用占位符替代mixin（适合无参数的场景） #

如果你的按钮结构样式不需要参数化，也可以把结构样式写成占位符，然后通过@extend同时继承两个占位符，Sass也会把它们合并到同一个规则里：

%btn-structure {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

%red-color {
  color: red;
}

.btn {
  @extend %btn-structure;
  @extend %red-color;
}

编译后的CSS同样是单个.btn规则块，包含所有样式。

总结一下，最灵活的方式是升级到Dart Sass自动合并，或者根据你的代码结构把extend逻辑整合到mixin里，都能完美解决重复规则的问题。

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