@include会生成重复CSS，因为Sass将其设计为“文本粘贴”机制，每次调用都完整复制mixin内容且不合并；而%占位符通过@extend触发编译期选择器合并，适合无参数或参数组合极少的静态样式复用。
@include 每次调用都会完整复制 mixin 内容，不合并、不 dedupe——这不是 bug，是设计使然。
为什么 @include 会生成一模一样的 CSS 块
SCSS 编译器不做运行时分析，@include 就是“文本粘贴”。比如定义 @mixin spacing($size) { padding: $size; }，在 8 个地方调用 @include spacing(12px)，最终 CSS 就有 8 份 padding: 12px;。
- 即使参数值完全相同，Sass 也认为每次调用都是独立逻辑分支
- 嵌套结构（如
&:hover）、@media块、@extend都会被整块复制 - 错误现象：CSS 文件里出现几十次重复的
display: flex; align-items: center;，但源码只写了一次@include flex-center
什么时候该换 % 占位符而不是死磕 @mixin
当样式块无参数、或参数组合极少（比如只有 primary/secondary 两种颜色），% 是更轻量的选择：它只声明规则，等 @extend 触发时才输出，且 Sass 自动合并相同结构。
- 正确用法：
%btn-hover { &:hover { background-color: #007bff; } }+.btn-primary { @extend %btn-hover; } - 不能传参、不能用
@content，只适合静态片段 - 跨文件使用必须显式
@use并带命名空间，例如@extend base.%reset-text，否则编译失败 - 别在
%里写margin、position或@media——这些容易被覆盖，违背复用初衷
如何避免 @mixin 被滥用导致体积失控
真正该用 @mixin 的，是那些「参数不同，输出必然不同」的逻辑变体；不是所有复用都该走这条路。
- 适合
@mixin：尺寸缩放（calc(14px * $scale)）、主题色衍生（background-color: $color）、纹理背景（background-size: $texture-size） - 不适合
@mixin：纯间距（padding: 16px）、圆角（border-radius: 4px）、基础过渡（transition: all 0.2s）——改用 CSS 自定义属性或原子类 - 禁用
@each循环中调用含选择器的@mixin；改用插值生成原子类名（如.p-#{12}），再交由purgecss裁剪 - 抽离
@mixin到独立文件后，若未被调用，它仍会参与编译（Sass 无 tree-shaking），反而增大体积
模块化导入必须用 @use，否则重名 @mixin 会静默覆盖
@import 是内容注入，不隔离作用域。两个文件都 @import "mixins/flex.scss"，第二个会直接覆盖第一个的 @mixin flex-center，且不报错。
- 必须改用
@use "mixins/flex" as f;，调用时写f.flex-center() - 全局暴露需通过统一入口聚合（如
src/styles/index.scss），再在 Vite/Webpack 配置中用@use "@/styles/index.scss" as *; - 禁止在配置的
additionalData里直接@use "mixins/flex.scss" as *;——这等于开后门污染全局 - 最易被忽略的是：团队里有人偷偷加了旧式
@import，或漏删组件内裸as *，靠 lint 和 CI 检查才能守住底线
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
