SCSS按需加载：用Mixin标记位避免CSS重复输出

很多开发者存在一个常见误解：认为SCSS中的@mixin会自动产生大量重复的CSS代码，事实并非如此。@mixin本质上是代码模板，仅当通过@include调用时，才会将其内部的规则原封不动地注入到指定位置。因此，问题的根源并不在于@mixin本身，而在于使用方式——或者说，是否混淆了@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）在%中无效。

一个容易被忽视的事实是：@mixin的核心价值从来不是“缩减CSS代码行数”，而是“让样式的变化更加可预测”。一旦过度关注“如何防止重复输出”，很可能是将本不应参数化的结构强行塞入了@mixin，或者在本该使用%placeholder的场合错误地使用了@include。只要理清思路，正确的选择便会水到渠成。