在 Sass 中，@mixin 和 @extend 是两个非常重要的代码复用机制，但它们的工作方式和适用场景有显著的区别。理解这些区别对于写出高效、可维护的 Sass 代码至关重要。

核心区别对比

详细解析与示例

1. @mixin：参数化的代码复制器

@mixin 就像是一个可以接收参数的函数，每次调用时，它会把定义的样式代码复制到当前选择器中。

编译过程示意：

// 定义 mixin
@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}

// 使用 mixin
.header {
  @include flex-center;
}

.sidebar {
  @include flex-center(column);
}

.footer {
  @include flex-center;
}

编译后的 CSS：

.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.sidebar {
  display: flex;
  flex-direction: column; /* 参数不同，生成了不同的代码 */
  justify-content: center;
  align-items: center;
}

.footer {
  display: flex;
  flex-direction: row; /* 重复了和 header 相同的代码 */
  justify-content: center;
  align-items: center;
}

可以看到，.header 和 .footer 的样式代码是完全相同的，但都被复制了一份。

2. @extend：选择器的合并器

@extend 不会复制代码，而是把当前选择器添加到被继承的规则集后面，形成选择器组。

编译过程示意：

// 定义一个基础样式类
.base-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

// 继承基础样式
.primary-button {
  @extend .base-button;
  background-color: blue;
  color: white;
}

.secondary-button {
  @extend .base-button;
  background-color: gray;
  color: black;
}

.success-button {
  @extend .base-button;
  background-color: green;
  color: white;
}

编译后的 CSS：

.base-button,
.primary-button,
.secondary-button,
.success-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.primary-button {
  background-color: blue;
  color: white;
}

.secondary-button {
  background-color: gray;
  color: black;
}

.success-button {
  background-color: green;
  color: white;
}

关键优势：基础样式只出现一次，所有继承它的选择器共享同一份样式规则。

实际应用场景

适合使用 @mixin 的场景

1. 需要参数化的样式

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

.avatar {
  @include size(40px);
}

.cover {
  @include size(100%, 200px);
}

2. 浏览器兼容性前缀

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box {
  @include transform(rotate(45deg));
}

3. 媒体查询封装

@mixin mobile {
  @media (max-width: 768px) {
    @content; // 允许传入额外的样式内容
  }
}

.card {
  width: 300px;

  @include mobile {
    width: 100%; // 移动端样式
  }
}

适合使用 @extend 的场景

1. 纯粹的样式复用，无参数变化

%clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.container {
  @extend %clearfix;
  width: 100%;
}

.grid {
  @extend %clearfix;
  display: grid;
}

2. 语义化的类名继承

.error {
  color: red;
  font-weight: bold;
  border: 1px solid red;

  &:hover {
    background-color: #ffeeee;
  }
}

.validation-error {
  @extend .error; // 继承所有 .error 的样式，包括 hover
  font-size: 12px;
}

.server-error {
  @extend .error;
  padding: 20px;
}

在 React 15 + CSS Modules 中的实践建议

结合你在 React 15 项目中使用 CSS Modules 的场景，这里有一些具体建议：

1. 优先使用 @mixin 的情况

// Button.module.scss

// 参数化的按钮变体
@mixin button-variant($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;

  &:hover {
    background-color: darken($bg-color, 10%);
  }

  &:active {
    background-color: darken($bg-color, 15%);
  }
}

.primary {
  @include button-variant(#1890ff);
}

.success {
  @include button-variant(#52c41a);
}

.danger {
  @include button-variant(#f5222d);
}

// 即使样式看起来相似，但因为未来可能独立修改
// 使用 mixin 更灵活

2. 谨慎使用 @extend 的情况

// 在 CSS Modules 中，@extend 可能会有一些陷阱

// ✅ 好的使用：继承占位符
%card-base {
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card {
  @extend %card-base;
  background: white;
}

.user-card {
  @extend %card-base;
  background: #f5f5f5;
}

// ❌ 避免：继承另一个模块化类名
// 这可能会导致选择器顺序问题，不建议
.special-card {
  @extend .product-card; // 不推荐，可能导致意外的样式覆盖
  border: 2px solid gold;
}

3. 结合 CSS Modules 的最佳实践

// styles/mixins.scss
@mixin responsive-spacing($size) {
  padding: $size * 1px;

  @media (max-width: 768px) {
    padding: $size * 0.5px;
  }
}

// components/Card/Card.module.scss
@import "../../styles/mixins";

.card {
  @include responsive-spacing(16);
  background: white;

  // 局部样式...
}

.card-title {
  font-size: 18px;
  font-weight: bold;
}

// 需要复用多个样式时，使用组合而非继承
.card-featured {
  composes: card; // CSS Modules 的组合特性
  border: 2px solid gold;
}

性能考量

在大型项目中，选择 @mixin 还是 @extend 会影响到最终 CSS 文件的大小：

• @mixin：如果同一个 mixin 被多次调用且没有参数变化，会产生重复代码，增加文件体积
• @extend：通过合并选择器减少代码量，但过度使用可能导致选择器过于臃肿

// 不推荐：大量使用无参数 mixin
@mixin hide-text {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.logo {
  @include hide-text; // 复制一份
}

.icon {
  @include hide-text; // 又复制一份
}

// 推荐：使用 extend
%hide-text {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.logo {
  @extend %hide-text; // 合并选择器
}

.icon {
  @extend %hide-text; // 合并选择器
}

总结

在实际开发中，我的建议是：

1. 默认使用 @mixin，它更灵活，意图更明确
2. 当确定一组样式永远不会改变且多处完全一致时，改用 @extend
3. 在 CSS Modules 中，优先使用 Sass 的 %placeholder 配合 @extend，而不是直接继承类名
4. 不要过度优化，代码可读性比极致的文件大小更重要