@mixin 是 scss 中最适合重构“有逻辑关联的声明组”的手段，适用于需包裹媒体查询、多属性联动、伪类嵌套、动态计算等场景；参数须以 $ 开头、单位由调用者传入、推荐关键词传参；@content 支持包裹式结构解耦；但需警惕 css 体积膨胀与过度封装。
@mixin 是 SCSS 中最直接、最可控的 CSS 重构手段，适合把“有逻辑关联的一组声明”抽成可复用块；它不是万能胶，但比复制粘贴、@extend 或纯 CSS 变量更适配重构场景。
什么时候该用 @mixin 而不是其他方式
重构不是为了抽象而抽象，关键看是否真在解决重复 + 变化 + 上下文耦合的问题：
- 需要包裹媒体查询（比如
@media (min-width: 768px)）——@extend无法跨媒体块继承，CSS 变量也控制不了规则结构 - 要同时改
background、color、border和transition行为——CSS 变量只换值，@mixin换整套规则 - 涉及伪类嵌套（如
&:hover::before）或 BEM 子选择器（如&__title）——@mixin里用&能正确解析上下文，@extend会失效 - 参数必须动态计算（比如
margin-top: $size * -0.5）——Sass 运算只能在@mixin或@function内进行
@mixin 参数定义和调用的常见陷阱
参数写错一个符号，编译可能不报错但输出完全不对，这类问题调试成本高：
- 参数名必须以
$开头，否则会被当成字面量字符串（例如padding: size→ 输出padding: size;） - 单位要留给调用者传入，别在 mixin 体内硬写
px（比如@mixin pad($size: 16px) { padding: $size; }是安全的；padding: $size + px会导致传rem时崩溃） - 关键词传参比位置传参更可靠，尤其当有多个可选参数时：
@include border($color: red, $width: 2px)不怕顺序错 - 别依赖
&在所有场景都指向你预期的选择器——如果@mixin被用在嵌套过深的上下文里（比如.card > .content { @include flex-center; }），&就是.card > .content，不是.card
用 @content 实现“包裹式”重构
当你发现某段样式总是一起出现、且中间夹着用户自定义内容（比如卡片容器、模态遮罩、带边框的表单区），@content 是唯一能解耦结构与内容的方式：
@mixin card-layout {
padding: 1rem;
border: 1px solid #eee;
border-radius: 4px;
@content;
}
调用时写：
.profile-card {
@include card-layout {
h3 { margin-top: 0; }
p { color: #555; }
};
}
注意：@content 不是参数，不能加默认值；它必须出现在 @mixin 最后（或至少在所有声明之后），否则会被忽略；它展开的位置就是 @include 所在处，不会新增选择器层级。
重构后 CSS 体积膨胀的隐性代价
@include 是“复制粘贴式展开”，每次调用都会生成一份完整样式代码。这在小项目里无感，但在组件库或中后台系统里容易失控：
- 避免在
@for循环里无节制调用大@mixin（比如一个含 20 行声明的@mixin responsive-grid被循环 10 次 → 多出 200 行 CSS） - 如果只是换颜色/尺寸等单一值，优先用 CSS 自定义属性（
--bg-color），而不是塞进@mixin - 业务语义过重的名字（如
@mixin user-card-header）会锁死复用路径；更通用的命名（如@mixin section-header）配合参数才可持续
真正难的不是写出 @mixin，而是判断哪一段“看起来重复”的样式，其实不该被封装——比如 cursor: pointer 单独抽成 @mixin clickable，只会让调试链路变长，且毫无维护收益。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
