Sass @mixin 与 @include（长文讲解）

从重复代码到优雅复用：Sass @mixin 与 @include 的实战指南

在前端开发中，我们常常会遇到这样的情景：同一个按钮样式、卡片布局或响应式规则，在多个页面中反复出现。如果每次都要手动复制粘贴 CSS 代码，不仅效率低下，还容易出错。更糟的是，一旦需要修改样式，就得在所有地方逐一调整——这简直是“程序员的噩梦”。

这时候，Sass 的 @mixin 与 @include 就像一位经验丰富的“代码建筑师”，帮你把重复的逻辑封装成可复用的模块。它们不只是语法糖，更是提升开发效率、保持代码一致性的核心工具。今天，我们就来深入剖析这个强大的组合，手把手带你掌握它的精髓。

什么是 @mixin？它为何如此重要？

在 Sass 中，@mixin 是一种声明“可复用代码块”的机制。你可以把它想象成一个“模板”——就像做蛋糕时准备好的模具，你只需要往里填入不同的食材（参数），就能快速做出形状一致的蛋糕。

举个例子，假设你有多个按钮都需要相同的圆角、背景色和悬停动画。如果没有 @mixin，你可能会写成这样：

.btn-primary {
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.btn-secondary {
  border-radius: 8px;
  background-color: #6c757d;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.btn-success {
  border-radius: 8px;
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

这些样式高度重复，维护成本极高。而使用 @mixin，你可以这样重构：

// 定义一个名为 button-style 的 mixin
@mixin button-style($bg-color, $text-color) {
  // 设置通用的圆角和内边距
  border-radius: 8px;
  padding: 10px 20px;
  // 使用传入的颜色参数
  background-color: $bg-color;
  color: $text-color;
  // 添加过渡动画
  transition: background-color 0.3s ease;
}

// 使用 @include 引入 mixin 并传参
.btn-primary {
  @include button-style(#007bff, white);
}

.btn-secondary {
  @include button-style(#6c757d, white);
}

.btn-success {
  @include button-style(#28a745, white);
}

✅ 注释说明：

• @mixin button-style($bg-color, $text-color)：定义一个接受两个参数的 mixin，$ 符号表示这是一个变量。
• @include button-style(...)：在具体类中调用该 mixin，并传入实际值。
• Sass 编译后会将所有 @include 替换为对应的 CSS 代码，实现“代码复用”。

@include 是如何工作的？它的本质是什么？

@include 的作用，就是“插入”一个已定义的 @mixin 到当前规则中。它不是执行函数，而是“复制粘贴”代码块。这一点很重要——你写在 @mixin 里的代码，最终会被完整地插入到 @include 的位置。

这就像你在写一份简历时，有一个“项目经验”模板。每次写新项目，就用 @include 把模板“粘贴”进来，然后填入自己的项目名、时间、职责等信息。

我们来看一个更复杂的例子：

// 定义一个响应式布局 mixin，支持移动端优先
@mixin responsive-grid($cols: 1, $gap: 1rem) {
  // 基础布局设置
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  gap: $gap;

  // 在小屏幕上只显示 1 列
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

// 使用 mixin 创建不同布局
.card-grid {
  @include responsive-grid(1, 1rem);
}

.feature-grid {
  @include responsive-grid(3, 1.5rem);
}

✅ 注释说明：

• $cols: 1 表示参数有默认值，如果调用时不传值，默认使用 1。
• @media 块被封装在 @mixin 内，调用时会自动嵌入对应规则。
• @include 的灵活性在于：你可以传参，也可以不传，完全由你控制。

参数设计：让 @mixin 更智能

@mixin 的强大之处，还在于它可以接收多种类型的参数，包括：

• 必需参数：必须传值
• 可选参数：有默认值，可选传
• 可变参数：支持传入多个值（用 ... 表示）

必需与可选参数

@mixin button-size($width, $height, $padding: 10px) {
  width: $width;
  height: $height;
  padding: $padding;
  font-size: 14px;
}

.btn-large {
  @include button-size(120px, 40px, 15px); // 传三个值
}

.btn-small {
  @include button-size(80px, 30px); // 只传前两个，第三个用默认值
}

✅ 注释说明：

• $padding: 10px 是可选参数，若不传则使用默认值。
• 参数顺序必须一致，否则会出错。

可变参数（Variadic Parameters）

当需要传入多个类似值时，比如多个阴影，@mixin 支持 ... 语法：

@mixin shadow($shadows...) {
  // $shadows 是一个“参数列表”
  @each $shadow in $shadows {
    box-shadow: $shadow;
  }
}

.card {
  @include shadow(
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.15)
  );
}

✅ 注释说明：

• $shadows... 表示可接收任意数量的参数。
• @each 用于遍历每个阴影值并应用。
• 适合处理边框、阴影、渐变等“多值”场景。

与 @extend 的区别：你该用哪个？

很多初学者会混淆 @mixin 与 @extend，但两者本质不同：

举个例子：

// 使用 @mixin
@mixin text-highlight($color) {
  background-color: $color;
  padding: 4px 8px;
  border-radius: 4px;
}

.highlight {
  @include text-highlight(#ffeb3b);
}

.warning {
  @include text-highlight(#f44336);
}

// 使用 @extend（不推荐用于动态样式）
%text-highlight {
  background-color: #ffeb3b;
  padding: 4px 8px;
  border-radius: 4px;
}

.highlight {
  @extend %text-highlight;
}

.warning {
  @extend %text-highlight;
}

✅ 注释说明：

• @mixin 适合需要传参的复用场景。
• @extend 适合静态的类名继承，但容易导致选择器爆炸。
• 建议优先使用 @mixin，除非你明确知道 @extend 能带来性能优势。

实际项目中的最佳实践

在真实项目中，@mixin 不应孤立存在。我们通常会将它们组织成模块化的工具库。

建议目录结构：

styles/
├── _mixins.scss        // 所有 mixin 定义
├── _variables.scss       // 全局变量
├── base/
│   ├── _buttons.scss
│   └── _layout.scss
└── main.scss             // 主入口

示例：创建一个按钮工具库

// _mixins.scss
@mixin button-style($bg-color, $text-color, $border-radius: 8px, $padding: 10px 20px) {
  display: inline-block;
  border: none;
  border-radius: $border-radius;
  padding: $padding;
  background-color: $bg-color;
  color: $text-color;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }
}

// _buttons.scss
.btn {
  @include button-style(#007bff, white);
}

.btn-outline {
  @include button-style(transparent, #007bff, 6px, 8px);
  border: 2px solid #007bff;
}

.btn-lg {
  @include button-style(#28a745, white, 12px, 15px 30px);
}

✅ 注释说明：

• 所有按钮样式通过 @mixin 统一管理，修改一处即可全局生效。
• &:hover 等伪类可直接写在 @mixin 内，逻辑更完整。
• 保持代码整洁，便于团队协作。

总结：Sass @mixin 与 @include 如何改变你的开发方式？

@mixin 与 @include 不仅仅是 Sass 的语法功能，它们代表了一种编程思维的升级：从“写代码”到“设计代码”。

当你能熟练运用它们，你会发现：

• 重复的 CSS 代码大幅减少；
• 样式修改只需一处，无需全局搜索；
• 项目结构更清晰，团队协作更高效；
• 高度可维护，适合大型项目长期迭代。

无论你是初学者还是中级开发者，掌握 Sass @mixin 与 @include 都是迈向专业前端工程师的重要一步。它让你不再被重复劳动拖累，而是专注于设计与逻辑本身。

别再让代码“复制粘贴”成为你的日常。从今天起，用 @mixin 封装你的逻辑，用 @include 释放你的创造力——这才是现代 CSS 开发应有的模样。