@mixin本身不膨胀体积，滥用@include才导致css膨胀；因其是编译期文本替换，每次调用都原样复制整段样式，不合并、不去重，尤其在循环、嵌套或跨组件重复调用时生成大量冗余代码。
@mixin 本身不会导致体积膨胀，真正让 CSS 变大的是滥用 @include —— 尤其在循环、深层嵌套或跨组件重复调用时，它会把同一段样式原样复制多遍。
为什么 @include 多次调用会让 CSS 膨胀
SCSS 的 @mixin 是“文本替换”机制：每次 @include，就展开一份完整副本，不合并、不 dedupe。比如一个带媒体查询的响应式 mixin，在 5 个组件里各调用一次，最终 CSS 就会出现 5 套完全相同的 @media (min-width: 768px) { ... } 块。
- 常见错误现象：
grep -c "font-size: 1.125rem" main.css返回值远高于你手动写的类数 - 嵌套中使用
@include更危险：每深一层，父选择器前缀都会被复制进去，.card .content { @include responsive-text; }和.modal .body { @include responsive-text; }会生成两组独立规则，而非共享 - 和
@extend混用时雪上加霜：如果 mixin 内部又@extend %base，Sass 会先展开 mixin，再对每个副本做 extend 合并，组合爆炸风险翻倍
@mixin 该用在哪种场景才安全
适合用 @mixin 的，是「逻辑封装」而非「样式复用」——它解决的是“怎么写”，不是“怎么省”。只要展开后内容不重复、不依赖上下文，就基本可控。
- 参数化计算：比如
@mixin spacing($size) { margin: $size * 0.25rem; }，不同参数生成不同值，天然不重复 - 条件分支控制：如
@mixin button-variant($color) { @if $color == primary { background: blue; } @else { background: gray; } }，输出结果由输入决定，无冗余 - 仅含伪类或媒体查询的“壳”：比如
@mixin hover-focus { &:hover, &:focus { outline: 2px solid var(--focus-color); } }，它只加状态钩子，不带具体样式值，展开后也不会撞车 - 绝对不该用的地方：纯视觉声明（如
display: flex; align-items: center;）直接写成工具类更轻量；含 BEM 子元素选择器（如.card__header）的 mixin，一旦在多个父级下调用，就会产出.a__header、.b__header等多份
什么时候该用 @extend，什么时候必须换掉
@extend 的唯一合理用途，是替代「完全静态、无上下文、无状态、可直接挂 HTML 上」的类。除此之外，基本都在埋雷。
- 能用
@extend的例子：%sr-only、%visually-hidden、%reset-list—— 它们没有:hover、没有@media、不关心父级、不依赖变量，单独加到任意标签上都 100% 有效 - 必须停用
@extend的信号：main.css里搜索margin:出现次数 > 项目中实际用到的 margin 类数量；或者发现大量.header .btn-primary、.sidebar .btn-primary这类组合选择器 - 替代方案不是“少用
@extend”，而是换范式：margin: var(--spacing-md)+ 全局定义:root { --spacing-md: 0.75rem; }—— 所有组件共用同一份声明，gzip 后只存一次 - 构建链路上注意：
@extend产生的冗余，cssnano基本无法合并，因为它们分散在不同规则块里；而自定义属性的复用，压缩工具能轻易识别并保留唯一声明
最常被忽略的一点：你看到的 main.min.css 体积，90% 以上取决于 SCSS 源码结构，而不是压缩开关开没开。检查未压缩的 main.css，比盯着 webpack 配置有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
