@mixin 是编译期模板，通过参数生成静态 CSS 变体，不支持运行时响应；命名传参可防错位；& 不能在定义中使用；@content 是文本插入而非作用域穿透。
传参让@mixin能生成不同尺寸、颜色、断点的样式变体
单纯 CSS 类（比如 .btn-primary）是静态的，写死一套值；而 @mixin 本质是编译期模板，靠参数驱动输出。比如定义 @mixin button($size: md, $color: blue)，调用时可以是 @include button($size: sm, $color: red)，最终生成的 CSS 就是独立的一套规则，不依赖运行时 JS 或 class 切换。
常见错误现象：把 @mixin button 当成 JS 函数，以为能“动态改值”，结果发现改了变量没生效——它只在编译时跑一次，不是运行时响应式。
- 适合场景：组件库中需要批量产出
.btn-sm/.btn-lg、主题色切换（$theme: dark）、响应式内边距（@mixin padding($breakpoint: md)） - 不适合场景：只是重置 margin/padding 的通用类（如
.reset），直接写类更轻量，也更容易被浏览器 DevTools 定位 - 性能影响：每个
@include都会把整个 mixin 内容复制一遍，不压缩、不去重；10 次调用@mixin flex-center，就生成 10 份相同的display: flex; justify-content: center; align-items: center
参数默认值 + 命名传参避免静默错位
Sass 4.0+ 支持命名参数，但老项目或协作中仍常见位置参数错位问题。例如定义 @mixin spacing($vertical, $horizontal: 8px)，若写成 @include spacing(16px, 24px)，$vertical 是 16px、$horizontal 是 24px，而非你预期的“垂直 16px、水平用默认值”。这种错位不会报错，但样式就偏了。
推荐写法：@include spacing($vertical: 16px, $horizontal: 24px)，明确绑定，不怕顺序变、不怕默认值逻辑改。
立即学习“前端免费学习笔记（深入）”；
错误现象：Invalid CSS after "nclude spacing"——多半是括号不匹配或变量未定义，不是参数本身问题，但容易误判。
& 在 @mixin 里不能用，因为没上下文
& 只在 @include 被调用时才解析为外层选择器。你在 @mixin 定义里写 #{&}:hover 或 if & == '.btn'，Sass 编译器直接报错或生成无效 CSS。
典型坑：想让 mixin 根据宿主类名自动加前缀，比如在 .card 下调用就生成 .card:hover，在 .modal 下就生成 .modal:hover。这做不到，& 此时无绑定目标。
可行方案：把宿主选择器作为参数传入，例如 @mixin interactive($selector: '.btn')，再用插值 #{$selector}:hover；注意 Sass 3.5 以前不支持该写法，必须用 Dart Sass。
@content 让 mixin 支持“插入外部样式”，但作用域不穿透
@content 是 @mixin 的占位符，它把 @include 后大括号里的内容原样塞进去，不是函数调用。这意味着：
- 你在
@content里声明的变量，在 mixin 外不可见 - 嵌套层级会叠加：如果外层是
.card { @include container { p { color: red; } } }，而@mixin container里有& > .inner { @content }，最终生成的是.card > .inner p { color: red; } - 媒体查询会被重复包裹：外层有
@media (min-width: 768px) { @include responsive { ... } }，而 mixin 内又写了@media (prefers-reduced-motion) { @content }，结果就是嵌套媒体查询，可能触发浏览器兼容问题
真正容易被忽略的是：@content 不是“执行”，而是“文本插入”。它看起来像高阶函数，实则只是字符串拼接，调试时看不到中间变量，出问题只能靠肉眼比对编译后 CSS。
