@mixin 用于定义可复用的 css 块，不生成实际样式，仅待 @include 调用；支持带默认值的参数（如 $size）、变量必须以 $ 开头，适合高频、可变、稳定的样式模式。
怎么用 @mixin 定义一个可复用的 CSS 块
直接写 @mixin + 名字 + 括号（可选参数），然后大括号里写样式规则就行。它不生成实际 CSS，只存着等你调用。
- 没参数时：
@mixin center-flex { display: flex; justify-content: center; align-items: center; } - 带参数时：
@mixin pad($size) { padding: $size; }，调用就写@include pad(16px) - 参数可以设默认值：
@mixin border($width: 1px, $style: solid, $color: #ccc)，调用时@include border(2px)就只覆盖第一个参数
为什么传参要用 $ 开头，不能直接写 padding: $size
sass 里变量必须以 $ 开头，这是语法硬性要求。漏掉 $ 会被当成字面量字符串，比如写成 padding: size，编译后就是 padding: size —— 浏览器直接忽略这条声明。
- 常见错误：
@mixin shadow { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }看似没问题，但一旦想动态改模糊值，没参数就只能复制粘贴改，失去复用意义 - 更稳妥写法：
@mixin shadow($blur: 4px) { box-shadow: 0 2px $blur rgba(0,0,0,0.1); } - 注意单位要一致：传
rem就别在 mixin 里硬写px，否则单位混用容易出计算偏差
@include 调用时嵌套在选择器里会怎样
它会把 mixin 里的规则原样展开到当前作用域，支持嵌套上下文。比如在 .card { ... } 里 @include center-flex，生成的 CSS 仍是 .card { display: flex; ... }，不会额外加层级。
- 但如果你在 mixin 里写了嵌套规则（比如
&__title { font-size: 18px; }），它会自动解析&为外层选择器，适合 BEM 类命名场景 - 别在 mixin 里写
@media后直接跟属性 —— Sass 允许，但可读性差；更推荐单独抽成@mixin respond-to($breakpoint)这种语义化封装 - 多个
@include可以并列写，顺序影响最终 CSS 层叠优先级，和手写一样：后写的声明会覆盖前面同名属性
哪些样式不适合塞进 mixin
不是所有重复样式都该用 mixin。过度封装反而让调试变难、编译体积变大。
立即学习“前端免费学习笔记（深入）”；
- 单条属性且极少变动：比如
cursor: pointer，直接写比@mixin clickable { cursor: pointer; }更轻量 - 强业务语义的组合：如
@mixin user-card-header，名字绑死了用途，换个页面就不好复用；不如拆成@mixin flex-center+@mixin type-h3这类原子能力 - 涉及复杂逻辑判断（比如根据主题切换颜色）：Sass 的
@if能做，但维护成本高，这类更适合交由 CSS 自定义属性或 js 控制
真正值得封装的，是那些「高频出现、参数可变、逻辑稳定」的样式模式，比如响应式断点、过渡动画、表单控件重置 —— 它们构成的是工程里的“样式基元”，而不是某个页面的快照。