Sass @mixin 与 @include（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 CSS 开发中，重复书写相同或类似的样式代码是一个常见痛点。无论是按钮的圆角、阴影效果，还是响应式布局的媒体查询，频繁的代码复制粘贴不仅浪费时间，还容易引发维护困难。为了解决这一问题，Sass 提供了两个强大的工具：@mixin 和 @include。它们如同 CSS 的“配方”与“执行者”，能够帮助开发者高效复用代码，提升开发效率。本文将从基础概念、实际案例到高级技巧，逐步讲解这两个指令的使用方法与核心价值。

一、基础概念：什么是 @mixin 和 @include？

1.1 @mixin：定义代码块的“配方”

@mixin 是 Sass 中用于定义可复用代码块的关键字。它类似于其他编程语言中的函数或方法，允许开发者将一段 CSS 代码封装起来，并为其命名。例如，可以将常见的按钮样式（如圆角、阴影、过渡效果）定义为一个 @mixin，方便后续调用。

语法示例：

@mixin button-style {  
  padding: 10px 20px;  
  border-radius: 4px;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
  transition: all 0.3s ease;  
}  

1.2 @include：执行已定义的 @mixin

@include 是调用 @mixin 的关键字。当需要使用已定义的代码块时，只需在目标选择器中插入 @include 和对应的 @mixin 名称，即可一键生成所有相关样式。

调用示例：

.button {  
  @include button-style;  
  background-color: #4CAF50;  
  color: white;  
}  

1.3 比喻理解：食谱与烹饪

可以将 @mixin 比作一道菜的“食谱”，而 @include 则是“按照食谱烹饪的过程”。例如：

• 食谱（@mixin）：记录了“番茄炒蛋”的所有步骤和材料；
• 烹饪（@include）：当需要做这道菜时，只需按照食谱执行即可，无需重复记忆步骤。

二、核心功能：参数化与动态样式

2.1 参数传递：让 @mixin 更灵活

通过在 @mixin 中添加参数，可以动态修改代码块的内容，满足不同场景的需求。例如，定义一个可变圆角的 @mixin：

参数化示例：

@mixin rounded-corners($radius: 4px) {  
  border-radius: $radius;  
}  

// 调用时指定参数  
.card {  
  @include rounded-corners(8px); // 输出 border-radius: 8px;  
}  

.button {  
  @include rounded-corners(); // 使用默认值 4px  
}  

2.2 默认值与可选参数

参数可以设置默认值，这样在调用 @mixin 时，若未指定参数，将自动使用默认值。例如：

@mixin shadow($color: rgba(0,0,0,0.3), $blur: 4px) {  
  box-shadow: 0 2px $blur $color;  
}  

// 使用默认值  
.box {  
  @include shadow(); // 输出 box-shadow: 0 2px 4px rgba(0,0,0,0.3);  
}  

// 覆盖部分参数  
.modal {  
  @include shadow(blue, 8px); // 输出 box-shadow: 0 2px 8px blue;  
}  

2.3 多参数与复杂逻辑

@mixin 可以接收多个参数，并通过条件判断实现更复杂的逻辑。例如，根据屏幕尺寸生成响应式字体大小：

@mixin responsive-font($base: 16px, $breakpoint: 768px) {  
  font-size: $base;  
  @media (min-width: $breakpoint) {  
    font-size: $base * 1.2;  
  }  
}  

// 调用  
body {  
  @include responsive-font(14px, 1024px);  
}  

三、进阶技巧：提升代码复用性

3.1 避免重复的“代码污染”

通过合理使用 @mixin，可以避免在多个地方重复编写相同代码。例如，定义一个统一的按钮样式库：

// 定义不同样式的按钮  
@mixin primary-button($color: #4CAF50) {  
  background-color: $color;  
  @include button-base; // 继承基础样式  
}  

@mixin secondary-button($color: #f5f5f5) {  
  background-color: $color;  
  @include button-base;  
}  

// 基础样式复用  
@mixin button-base {  
  padding: 10px 20px;  
  border: none;  
  cursor: pointer;  
  transition: all 0.2s;  
}  

// 调用  
.primary { @include primary-button(); }  
.secondary { @include secondary-button(); }  

3.2 命名空间与模块化

当项目复杂度增加时，可以通过命名空间（@mixin 组合）将相关 @mixin 分组管理，避免名称冲突。例如：

// 定义一个命名空间  
.namespace {  
  @mixin button {  
    // 按钮相关样式  
  }  
  @mixin card {  
    // 卡片相关样式  
  }  
}  

// 调用时需指定命名空间  
.button {  
  @include namespace.button();  
}  

3.3 与嵌套选择器结合

@mixin 可以与 Sass 的嵌套语法结合，生成更复杂的样式结构。例如，定义一个可复用的卡片组件：

@mixin card($color: white, $radius: 8px) {  
  background-color: $color;  
  border-radius: $radius;  
  padding: 20px;  
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);  
  &__header { // 嵌套子元素  
    font-weight: bold;  
    margin-bottom: 10px;  
  }  
}  

// 调用  
.card {  
  @include card(#f0f0f0, 12px);  
}  

四、实际案例：构建响应式布局

4.1 媒体查询的复用

通过 @mixin 封装媒体查询条件，可快速适配不同屏幕尺寸。例如：

@mixin respond-to($breakpoint) {  
  @if $breakpoint == mobile {  
    @media (max-width: 767px) { @content; }  
  } @else if $breakpoint == tablet {  
    @media (min-width: 768px) { @content; }  
  } @else if $breakpoint == desktop {  
    @media (min-width: 1024px) { @content; }  
  }  
}  

// 使用  
.container {  
  width: 100%;  
  @include respond-to(mobile) {  
    max-width: 320px;  
  }  
  @include respond-to(desktop) {  
    max-width: 1200px;  
  }  
}  

4.2 网格系统的抽象

构建自适应网格系统时，@mixin 可以帮助生成列间距和百分比宽度：

@mixin grid-column($span) {  
  width: percentage($span / 12); // 将 1/12 转换为百分比  
  padding: 0 15px; // 列间距  
}  

// 调用  
.col-6 {  
  @include grid-column(6);  
}  
.col-4 {  
  @include grid-column(4);  
}  

五、常见问题与最佳实践

5.1 何时使用 @mixin？

• 重复代码多：当同一段代码需要在多个地方出现时。
• 动态样式：需要根据参数生成不同样式的场景（如按钮主题、阴影强度）。
• 复杂逻辑：涉及嵌套选择器或媒体查询的结构化代码。

5.2 如何避免滥用 @mixin？

• 保持简洁：每个 @mixin 应专注于单一功能（如阴影、边框）。
• 避免嵌套过深：过度嵌套可能导致代码难以维护。
• 文档说明：为复杂的 @mixin 添加注释，方便团队协作。

5.3 与 @extend 的区别

@extend 是另一个代码复用工具，但两者用途不同：

• @mixin：通过参数动态生成样式，适合可变场景；
• @extend：继承现有选择器的所有样式，适合静态复用。

六、结论

Sass 的 @mixin 与 @include 是提升 CSS 开发效率的利器。通过将重复代码封装为可复用的“配方”，开发者能够减少冗余、增强代码一致性，并专注于逻辑与设计的优化。无论是基础样式、响应式布局，还是复杂组件的构建，合理使用这两个指令都能显著提升开发体验。

实践建议：

1. 从简单场景入手（如按钮、边距样式）逐步熟悉语法；
2. 为常用样式建立标准化的 @mixin 库；
3. 结合参数和命名空间，构建模块化的设计系统。

掌握 Sass @mixin 与 @include，你将迈出迈向高效 CSS 开发的重要一步！