Sass 解耦需分重置、基础变量与工具、独立组件三层，仅通过变量和 mixin 通信；@use 默认私有作用域，须用 with 或命名空间访问变量；主题切换应基于语义化 map 映射变量而非固化值；模块化不自动瘦身，需拆细 mixin 文件并用 @at-root 控制输出。
怎么让 Sass 的 base 和 component 真正解耦
Base 不该知道 Button 长什么样，Component 也不该重写 body 的字体大小。常见错误是把全局重置、工具类、组件样式全塞进一个 _base.scss，结果改个 $font-size-base 全站按钮文字跟着跳。
正确做法是分三层：重置（reset）、基础变量与工具（base）、独立组件（components）。三者之间只通过变量和 mixin 通信，不互相 @import 样式规则。
-
reset.scss只做 box-sizing、normalize 行为，不定义颜色/尺寸变量 -
base/_variables.scss定义$color-primary、$spacing-xs等原子级变量，不出现.btn -
components/_button.scss用@include hover-state()这类抽象 mixin，不硬写transition: all 0.2s
Sass 模块化后为什么 @use 报错说找不到变量
因为 @use 是私有作用域，默认不暴露变量。你写了 @use 'base/variables'，但没加 with 或 as *，组件文件里直接写 $color-primary 就会报 Undefined variable。
两种安全写法：
- 在组件文件顶部统一导入并暴露：
@use 'base/variables' with ($color-primary: #007bff); - 或用命名空间方式访问：
@use 'base/variables'; .btn { color: variables.$color-primary; }
别用 @import 回退——它会让变量全局污染，模块化就白做了。
如何让 Button 组件支持主题切换又不重复编译 CSS
不是给每个主题建一套 _button-dark.scss，而是用 Sass 的 map + @each 动态生成。主题数据存在 base/_themes.scss 里，components/_button.scss 只负责结构逻辑。
关键点在于：主题 map 里只存语义键（primary、disabled），不存具体颜色值；颜色值由 base/_variables.scss 提供，主题只是映射关系。
- 错误写法：
$theme-dark: (bg: #1a1a1a, text: #fff);→ 值固化，无法复用变量 - 正确写法：
$theme-dark: (bg: $color-surface-dark, text: $color-on-surface-dark); - 组件内用
map-get($theme-dark, bg)，编译时才解析变量，CSS 不膨胀
为什么打包后 CSS 体积没变小，甚至更大了
模块化不等于自动瘦身。Sass 的 @use 虽然隔离了作用域，但如果你在每个组件里都 @use 'base/mixins'，而这个 mixins 文件里有 20 个未被调用的 @mixin，它们全会被引入并编译进最终 CSS。
真正可控的压缩方式只有两个：
- 拆细 mixin 文件：把
_mixins.scss拆成_hover.scss、_focus.scss、_size.scss，按需@use - 用
@at-root控制输出位置：避免嵌套过深导致选择器冗余，比如.btn { @at-root .btn--large { ... } }而不是.btn { &--large { ... } }
最常被忽略的是：Sass 模块化后，开发者容易过度依赖 @use 而忘了检查实际产出——打开编译后的 CSS，搜 .btn，看有没有重复的 display: inline-flex 出现三次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
