Mixin 类似带样式的函数：用 @mixin 定义一段样式（可以带参数与默认值），用 @include 调用，调用一次就把这段样式复制到当前位置。最典型的用途是封装兼容代码块（一行圆角自动带齐各浏览器前缀）和响应式断点：@include respond-to(md) 写业务，媒体查询细节全部藏在 mixin 内部，业务代码只剩语义。
与占位符（@extend）的区别必须记住：Mixin 是把样式复制一份到每个调用处，互相独立互不影响；@extend 是把多个选择器合并到同一组规则里，产物更小但耦合更重、跨文件使用风险大。经验法则：需要传参、要生成不同变体的用 Mixin；纯粹共享且永不变更的样式用占位符；需要计算并返回一个值（颜色、尺寸）则交给 @function。三者各司其职，组合使用基本能覆盖所有复用场景。
<style> /* Sass 源码： @mixin btn($bg: #4a9eff) { background: $bg; color: #fff; border-radius: 6px; } .a { @include btn; } .b { @include btn(#f778ba); } —— 编译后的纯 CSS： */ .a { background: #4a9eff; color: #fff; border-radius: 6px; } .b { background: #f778ba; color: #fff; border-radius: 6px; } </style> <button class="a">默认参数</button> <button class="b">传入参数</button>