Sass的@mixin和@include可封装复用样式，如定义flex布局和过渡效果，通过参数和默认值提升灵活性，减少重复代码并提高维护性，建议集中管理于\_mixins.scss文件中。
在CSS开发中，重复写相似的样式会降低效率并增加维护成本。Sass 提供了 @mixin 和 @include 机制，让我们能将常用样式封装成可复用的代码块，大幅提升开发效率。
什么是 @mixin 和 @include
@mixin 用于定义一段可复用的样式代码块，可以带参数也可以不带。定义后，使用 @include 将其插入到需要的地方。
例如，想统一设置元素的 Flex 布局样式：
@mixin flex-center {display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flex-center;
}
.modal {
@include flex-center;
}
带参数的 mixin 提高灵活性
通过为 mixin 添加参数，可以让样式更灵活。比如定义一个支持方向控制的 Flex 容器：
立即学习“前端免费学习笔记（深入）”；
display: flex;
flex-direction: $direction;
justify-content: center;
align-items: center;
}
.row-layout {
@include flex(); // 默认横向
}
.column-layout {
@include flex(column); // 纵向排列
}
参数支持默认值，调用时可覆盖，适合构建通用布局工具类。
使用占位符和条件逻辑增强功能
结合 Sass 变量与 if 判断，能创建更智能的 mixin。例如实现带浏览器前缀的过渡效果：
@mixin transition($props...) {-webkit-transition: $props;
-moz-transition: $props;
-ms-transition: $props;
transition: $props;
}
.button {
@include transition(all 0.3s ease);
}
这里的 $props... 表示接受多个参数，适用于 box-shadow、transform 等多值属性。
基本上就这些。合理使用 @mixin 和 @include 能显著减少重复代码，让样式结构更清晰。建议将常用 mixin 集中放在 _mixins.scss 文件中统一管理，便于项目复用。
