@mixin 是编译期静态模板，通过参数批量生成独立 css 规则，适合组件库主题、断点间距等场景；但不适用于简单复用，且需警惕命名参数缺失、& 误用及作用域限制。
因为 @mixin 是编译期模板，参数驱动生成静态变体，不是运行时逻辑——它把“写十遍相同结构但值不同”的体力活，变成一次定义、多处调用的声明式操作。
参数让同一段样式逻辑产出不同 CSS 规则
比如按钮尺寸和颜色组合：手动写 .btn-sm、.btn-lg、.btn-primary、.btn-danger……容易漏、难维护；而定义 @mixin button($size: md, $color: blue) 后，调用 @include button($size: sm, $color: red) 就直接生成一套独立规则，不依赖 class 切换或 JS 控制。
- 适合批量产出：组件库中主题色切换、断点内边距、响应式字体缩放
- 不适合简单复用：像
.reset-margin这种纯重置类，直接写更轻量、DevTools 更易定位 - 注意：每个
@include都会完整复制 mixin 内容，10 次调用就生成 10 份相同 CSS，不压缩、不去重
命名传参防止静默错位，尤其老项目协作时
位置参数容易出错：@mixin spacing($vertical, $horizontal: 8px)，若写成 @include spacing(16px, 24px)，Sass 不报错，但 $vertical 变成 16px、$horizontal 变成 24px，而非你预期的“垂直 16px、水平用默认值”。
- 推荐写法：
@include spacing($vertical: 16px, $horizontal: 24px)，绑定明确，顺序无关 - 老项目可能还在用 Sass 3.x，不支持命名参数，需统一升级 Dart Sass 或约定文档规范
- 错误提示
Invalid CSS after "nclude spacing"多半是括号/变量未定义，不是参数本身问题
& 在 @mixin 定义里不可用，别试图让它自动感知宿主选择器
& 只在 @include 被调用时才解析为外层选择器。你在 @mixin 里写 #{&}:hover 或 if & == '.btn'，Sass 编译器直接报错或输出无效 CSS。
- 想实现“在
.card下生成.card:hover”，得把选择器当参数传入：@mixin interactive($selector: '.btn') { #{$selector}:hover { ... } } - Sass 3.5 以前不支持插值写法，必须用 Dart Sass（当前主流）
-
@content是文本插入，不是作用域穿透——它不会把父级变量带进 mixin 体内
真正容易被忽略的是：mixins 的灵活性完全依赖编译期确定性。一旦你开始期待它响应数据变化、或依赖 DOM 状态动态调整，就说明它已超出能力边界——该换 CSS 自定义属性或 JS 驱动了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
