必须用带参数的@mixin而非无参mixin或@extend时，是需动态调整样式行为且css变量或选择器合并无法解决的场景，如媒体查询包裹、伪类嵌套、主题色切换、单位敏感配置等。
直接用带参数的 @mixin 封装可变点，比复制粘贴或硬编码更可控，也比 @extend 更安全——尤其当你要控制媒体查询、伪类嵌套或主题切换时。
什么时候必须用带参数的 @mixin 而不是无参 Mixin 或 @extend
当你需要在不同上下文中动态调整样式行为，且这些调整不能靠 CSS 变量或选择器合并解决时，@mixin 是唯一可行路径。
- 媒体查询包裹：比如
@mixin responsive-font($sm: 14px, $md: 16px, $lg: 18px)内部直接写@media块，@extend根本无法跨断点复用 - 伪类组合：如
&:hover::before这种嵌套结构，@extend会失效，而@mixin能保持完整作用域 - 主题色切换：你不能让
@extend .btn-primary在深色模式下自动换色，但@mixin button-style($bg: $primary-color)可以随变量注入实时变化 - 单位敏感场景：比如传
rem或px进去，@mixin padding($value)体内写padding: $value，不硬绑单位
@mixin 参数定义的三个关键细节
参数不是越全越好，而是要对齐真实修改频率和耦合风险。
- 默认值必须设：比如
@mixin border($width: 1px, $style: solid, $color: #ccc)，调用@include border()才不会报错 - 避免参数耦合：别写
@mixin shadow($spec: "0 2px 4px rgba(0,0,0,0.1)")，应拆成$x, $y, $blur, $color，否则改偏移就得重写整串字符串 - 命名参数优先于顺序传参：尤其是参数 >2 个时，
@include border($color: red, $width: 2px)比@include border(2px, solid, red)更不易出错
容易被忽略的编译陷阱
SCSS 编译器不会主动报错，但某些写法会让输出 CSS 变得不可控或难以调试。
- 参数名漏写
$：写成@mixin pad(size: 16px) { padding: size; }，结果编译出来是字面量padding: size;，不是值 - 单位混用：
@mixin radius($r) { border-radius: $r; }，如果调用时传@include radius(4)（没单位），编译失败；应统一要求带单位，或加类型判断（如if (unit($r) == "") { $r: $r + px; }） -
@content插槽误用：比如想封装一个带过渡的按钮，又想在里面插入自定义 hover 样式，必须显式写@content，否则子样式进不去 - 嵌套中调用 mixin 忘记
&：在父选择器里写.card { @include hover-effect; }，而@mixin hover-effect里有&:hover，那最终生成的是.card:hover；但如果写成hover-effect里漏了&，就会变成全局:hover，污染其他元素
真正难的不是写出一个能跑的 @mixin，而是预判它未来会被怎么覆盖、在哪种嵌套层级下调用、是否会被主题系统注入新变量——这些决定了它能不能活过三个月迭代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
