必须将顶层css规则封装进@mixin并显式@include，才能避免重复输出；@use含顶层规则的模块会无条件编译样式，即使只调用其变量或mixin。
纯 CSS 没有“单例模式”的概念，Sass 本身也不提供运行时单例控制；所谓“Sass 单例模式”，实际是开发者用模块化 + 作用域隔离 + 顶层规则规避等手法，**防止同一组样式被重复编译进最终 CSS**——本质是避免冗余输出，而非 JS 那种实例唯一性。
为什么直接 @use 会导致样式重复输出
@use 加载一个含顶层规则（如 .btn { ... }）的模块时，只要该模块被任何文件 @use，其顶层 CSS 就会无条件编译进最终输出。哪怕你只调用了里面的 $btn-padding 变量或 btn-variant() mixin，.btn 规则照样出来。
- 常见错误：把按钮基础样式写在
_buttons.scss里，又在_header.scss和_card.scss中都@use "buttons"→ 最终 CSS 出现两份.btn - 根本原因：
@use控制的是 Sass 符号可见性，不是 CSS 输出开关 - 路径无关：即使相对路径不同、别名不同，只要源文件相同，顶层规则仍会重复注入
真正能避免重复 CSS 的做法：把样式封装进 mixin
只有把选择器和声明包进 @mixin，再由使用者显式 @include，才能做到“按需输出”。这是目前 Sass 生态中唯一可靠的方式。
- 把
_buttons.scss改成只定义变量和 mixin，不写任何顶层规则：@use "tokens" as t;<br><br>@mixin btn-base() {<br> display: inline-flex;<br> align-items: center;<br> padding: t.$spacing-sm t.$spacing-md;<br> border-radius: t.$radius-sm;<br>} - 在真正需要按钮样式的组件 SCSS 文件里才
@include btn-base()，否则不输出 - 如果多个地方都要用，就统一在
main.scss或布局层 include 一次，而不是每个模块都 include
如何安全地共享基础样式而不重复
有些样式（比如重置、基础排版、工具类）确实需要全局可用，但又不能靠 @use 多次引入来“保证存在”——那只会放大重复风险。
- 把这类样式放进独立入口文件（如
base.scss），且只在项目唯一的顶层 SCSS 入口（如main.scss）中@use "base"一次 - 禁止任何其他模块（
_header.scss、_card.scss等）再去@use "base"—— 它们应该只依赖变量/mixin，不依赖顶层规则 - 所有局部模块必须以下划线开头（如
_header.scss），确保构建工具不会把它当入口单独编译，否则会生成额外 CSS 文件 - 检查最终 CSS 是否含重复规则：搜索
.reset或.visually-hidden，看是否出现多次
最易被忽略的一点：Sass 不会自动 dedupe 选择器，哪怕内容完全一样。两个文件各自 @include reset();，最终 CSS 就会有两段 identical 的重置代码。控制权始终在开发者手上——谁 @include，谁负责输出时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
