该用@mixin时是需传参动态生成样式（如响应式、主题色），否则直接写类更轻量；它本质是编译期代码插入，不压缩去重，参数错位或滥用会导致冗余css和调试困难。
什么时候该用 @mixin 而不是直接写 CSS 类
因为 @mixin 本质是编译期的代码插入，不是运行时的样式复用。它适合封装**带参数、需多次微调**的样式逻辑，比如响应式断点、主题色变体、过渡动画组合；如果只是固定样式（如 .btn-reset），直接写类更轻量、更易调试。
常见错误现象：@mixin 套太多层、参数堆砌成“万能函数”，结果每次调用都生成冗余 CSS，还难定位来源。
- 用
@mixin：需要传$color、$size动态生成按钮样式 - 不用
@mixin：纯重置margin/padding的.reset类，直接写就行 - 性能影响：每个
@include都会把 mixin 内容原样复制进输出 CSS，不压缩、不去重
@include 调用时传参容易漏掉的兼容性细节
Sass 4.0+ 支持命名参数和位置参数混用，但老项目或团队协作中，位置参数一错就静默失败——比如你定义了 @mixin padding($x, $y: 8px)，却写成 @include padding(16px, 24px)，实际传给 $y 的是 24px，而你以为 $x 是 16px、$y 是默认值。
使用场景：组件库中统一控制内边距层级（sm/md/lg）时，靠命名参数更稳。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
@include padding($x: 16px, $y: 24px) - 避免写法：
@include padding(16px, 24px)（除非你 100% 确认参数顺序和默认值逻辑） - 错误现象：
Invalid CSS after "...nclude padding": expected "}", was "(16px, 24px)"—— 多半是括号不匹配或变量未定义，不是参数问题本身
为什么 @mixin 里不能用 & 引用父选择器做条件判断
& 在 @mixin 定义时没上下文，它只在 @include 被调用时才解析为外层选择器。所以你在 mixin 里写 #{&}:hover 或 if & == '.btn' 都会报错或失效。
这导致一个典型坑：想让 mixin 根据宿主类名自动加前缀或改行为，结果编译失败或样式错位。
- 可行方案：把宿主选择器作为参数传入，例如
@mixin btn-variant($selector: '.btn')，再用插值#{$selector}:hover - 不可行方案：
@mixin foo { #{&}:hover { ... } }——&此时无绑定目标 - 兼容性注意：Sass 3.5 以前连插值
#{$selector}都不支持嵌套，必须升级到 Dart Sass
用 @content 实现“样式占位”时最常卡住的点
@content 是 @mixin 的注入口，但它不是函数调用，而是编译器把 @include 后的大括号内容原样塞进去。这意味着：变量作用域不穿透、嵌套层级会叠加、媒体查询会被重复包裹。
典型使用场景：封装容器类（如 @mixin card { ... @content ... }），让使用者自定义内部样式。
- 错误写法：
@include card { .title { color: red; } }→ 编译后变成.card .title { color: red; }，但如果@mixin里已有&__title，就会套叠成.card .card__title .title - 正确思路：在 mixin 里用
&显式控制嵌套，@content只放纯声明，不放选择器 - 性能提示：
@content每次调用都展开全部内容，大量嵌套 + 多次 include = CSS 体积指数增长
@mixin、哪段其实该交给 JS 或 CSS 自定义属性来处理。 
