@mixin 是唯一能落地多维动态样式的方案，因其通过参数显式暴露变化点、支持嵌套与媒体查询封装、配合 @content 解耦结构与内容，仅在多处重复且多维变化时才体现真正价值。
因为@mixin把变化点显式暴露为参数，而直接写 CSS 会让重复逻辑散落在各处，改一处就得全局搜、手动对齐、极易漏掉。
当样式需要动态调整时，@mixin 是唯一能落地的方案
比如按钮要支持不同尺寸、主题色、禁用状态组合，且 hover 和 focus 行为还要联动变化——这种多维条件无法靠纯 CSS 类或 @extend 实现。
- @extend 只能静态合并选择器，不接受任何输入，
@mixin btn-variant($size: md, $theme: light, $disabled: false)才能真正封装逻辑 - 媒体查询必须包裹在 mixin 内部（如
@mixin responsive-padding($sm, $md, $lg)），否则断点规则会分散在多个文件里，改一个断点得翻十处 - 伪类嵌套（
&:hover::before）和 BEM 子选择器（&__icon）只能在 @mixin 中用&正确解析上下文，@extend 会丢失层级关系
参数设计直接决定维护成本高低
参数不是越多越好，而是要对齐真实修改频率。一个写错的参数名或单位处理，编译器往往不报错，但输出 CSS 完全失效，调试时很难定位。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 参数名必须带
$前缀：@mixin pad($size: 16px)，写成pad(size: 16px)会导致padding: size;这种无效字面量 - 单位由调用方传入，别在 mixin 体内硬拼：
border-radius: $r + px会崩掉@include radius(0.25rem) - 三个以上参数时，强制用命名传参：
@include border($color: red, $width: 2px)，避免位置错位导致静默错误
@content 让“容器结构”和“内部内容”解耦
很多组件是固定外壳 + 可变内容（如卡片、模态框、表单区），这类模式如果不用 @content，就只能复制粘贴整块结构，或者退化成一堆原子类塞满 HTML。
-
@mixin card { padding: 1rem; border: 1px solid #eee; @content; }调用时可插入任意子样式，结构与内容互不污染 - 变量作用域不穿透：@content 里的
$color不会自动继承 mixin 外部定义的同名变量，必须显式传入或重声明 - 媒体查询会被原样包裹：如果在 @content 外又套了一层
@media，最终可能生成嵌套两层 media，需人工检查输出 CSS
最常被忽略的是：@mixin 不是越抽象越好，单次调用的 @mixin、仅做属性别名的 @mixin（如 @mixin mt($v) { margin-top: $v; }），反而增加跳转成本和编译体积。它真正的价值，只在「多处重复 + 多维变化 + 上下文强关联」这三者同时成立时才兑现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
