极简SCSS应避免盲目抽象，仅在消除重复、明确语义且不增维护成本时使用@mixin；优先用:is()、inherit等原生CSS能力；删除所有单次调用的@mixin和@function。
SCSS 本身不是极简主义的解药，盲目抽象反而会让样式更难读、更难改。真正极简的 CSS 代码风格，是“用最少的声明做最多的事”，而 SCSS 只在它能消除重复、明确意图、且不增加维护成本时才值得用。
什么时候该抽成 @mixin？看这三点
别一上来就写 @mixin。先问自己：
- 这个样式块是否在3个以上不同选择器里完全一致地重复出现？比如所有
.btn、.card-footer、.alert都有同一套display: flex; align-items: center; gap: 0.5rem; - 它是否封装了一个有明确语义的行为？比如
@mixin visually-hidden比写四行position: absolute; clip: rect(...);更直白；但@mixin btn-reset就模糊——重置什么？边框？内边距？还是所有用户代理样式？ - 它是否不依赖上下文变量或父级状态？如果每次调用都要传
$color、$size、$variant，那它大概率该是@function或直接用 CSS 自定义属性，而不是混在@mixin里。
@function 比 @mixin 更适合极简场景
计算类逻辑交给 @function，比把计算塞进 @mixin 干净得多。比如响应式字号：
@function fluid-font($min, $max, $base: 1rem) {
@return clamp($min, $base * 1vw, $max);
}
<p>h1 { font-size: fluid-font(1.25rem, 2.5rem); }
</p>
这样写，fluid-font() 是纯计算、无副作用、可测试、可复用；而如果写成 @mixin fluid-font($min, $max) 再里面塞 font-size: clamp(...)，就混淆了“做什么”和“怎么写”。
常见误用：@mixin spacing($s) 里写 margin: $s; ——这本质是 margin 的别名，没抽象价值，还多一层跳转。直接用 CSS 的 margin-inline 或 gap 更轻量。
用 :is() 和 inherit 替代大量 @mixin 调用
很多所谓“重复样式”，其实是因为没利用好原生 CSS 的能力。例如统一标题下间距：
❌ 错误抽象：
@mixin heading-spacing {
margin-bottom: 1.25rem;
}
h1 { @include heading-spacing; }
h2 { @include heading-spacing; }
h3 { @include heading-spacing; }
✅ 正确做法：
:is(h1, h2, h3) {
margin-bottom: 1.25rem;
}
再比如按钮共用圆角和过渡：
.btn {
border-radius: 0.375rem;
transition: all 0.2s ease;
}
.btn-primary,
.btn-secondary,
.btn-outline {
/* 继承上面两个属性，无需重复声明 */
}
这时候加 @mixin button-base 反而让结构变重，也掩盖了“继承”这个更基础、更可控的机制。
极简 SCSS 的底线：删掉所有只用一次的 @mixin 和 @function
项目里搜 @include，如果某个 @mixin 只被调用一次，立刻删掉，把内容内联进去。同理，@function 如果只在一个地方 @return 后就被用掉，也没必要存在。
容易被忽略的点是：SCSS 编译后生成的 CSS 行数不等于可维护性。一个被滥用的 @mixin 可能让开发者花三倍时间搞清某条样式从哪来、为什么生效、能不能改——这才是极简真正的敌人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
