如何防止SCSS中的CSS代码重复输出_通过Mixin标记位实现按需加载

@mixin 本身不生成 CSS，重复输出源于误用 @include；真正防重复应优先用 %placeholder，因其能合并选择器避免冗余；mixins 的核心价值是让样式变化可预测，而非单纯减少行数。

SCSS 中 @mixin 本身不生成任何 CSS，只在 @include 处展开——所谓“重复输出”不是 mixin 的问题，而是误用 @include 或混淆了 @mixin 与 %placeholder 的结果。

为什么你看到的 CSS 重复了？

根本原因通常是：在多个选择器里反复 @include 同一个大块 mixin（比如含 20 行规则的 @mixin card-base），而没意识到每次调用都会原样复制全部声明。

• 编译后每个调用点都产出完整样式块，CSS 体积直接线性增长
• @extend %placeholder 才是真正“合并选择器、避免重复属性”的方案，但它不支持参数
• 把本该用 %placeholder 的通用结构（如重置边距、基础阴影）塞进 @mixin，等于主动放弃复用优势

用 @mixin 实现“按需加载”的真实做法

SCSS 没有运行时加载机制，“按需”指的是编译期控制哪些规则被注入。关键不是加标记位，而是分层设计 + 显式调用：

• 原子级 mixin 只封装单个逻辑单元：例如 @mixin flex-center、@mixin border-radius($r)，体积小、复用率高、不易冗余
• 组合型 mixin 仅用于明确需要动态变化的场景：比如 @mixin responsive-grid($breakpoint)，内部包裹 @media，且只在真有响应需求时才 @include
• 彻底避免在循环中 @include：如 @each $type in (primary, secondary, success) { .btn-#{$type} { @include btn-style($type); } } —— 若 btn-style 内容庞大，会瞬间膨胀 CSS

想“防重复”，优先考虑 %placeholder 而不是 @mixin

当一组样式完全静态、无参数、多处共用（如基础表单重置、文本截断、清浮动），%placeholder 是唯一能压缩输出体积的方式：

立即学习“前端免费学习笔记（深入）”；

• 写法：%text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
• 调用：.title { @extend %text-ellipsis; }
• 效果：所有使用 @extend 的选择器，最终共享同一段 CSS 规则，不会复制
• 限制：不能传参、不能包裹 @media、不能嵌套伪类（&:hover 在 % 里无效）

真正容易被忽略的点是：mixins 的价值不在“减少 CSS 行数”，而在“让变化可预测”。一旦开始纠结“怎么防止重复输出”，说明你可能把不该参数化的结构硬塞进了 @mixin，或者该用 % 的地方用了 @include。