变量须分base/（原子值）和semantic/（语义映射）两层，base只存带单位标识的原始值并注释物理意义，semantic用@use显式引入并一对一赋值，禁用@import，主题切换需用map+@each实现。
变量必须拆到独立文件，且不能只靠一个 _variables.scss 堆砌——300 行后，改个 $spacing-md 都得全局搜，还容易误动语义变量。
base/ 下只放原始值，不带业务含义
颜色、间距、字体大小这些“原子值”必须和 primary、card-padding 这类语义完全隔离。比如 $blue-50、$space-4、$font-size-sm 可以放 base/variables.scss，但 $color-primary 或 $card-spacing 绝对不行。
-
base/是“原料库”，只提供可组合的原始数据 - 所有变量名必须带单位或层级标识（如
-sm、-600），避免裸名如$blue - 每个变量必须有注释说明物理意义，例如
// 蓝色调色板第 6 级，用于主按钮背景
semantic/ 层做映射，且必须显式 @use as
业务语义变量（$color-primary、$spacing-card）要单独建 semantic/ 目录，用 @use 'base/variables' as base 显式引入原始值再做赋值。
- 禁止在
semantic/文件里写逻辑，只做一对一映射：$color-primary: base.$blue-600; - 每个语义变量必须注明使用场景，例如
// 用于按钮默认背景、导航高亮等强调操作入口 - 多个模块都需
$color-primary？那就统一@use 'semantic/colors' as semantic-color，而不是各自定义
@use 替代 @import，命名空间不能省
@import 是拼接式导入，变量一冲突就静默覆盖；@use 强制作用域隔离，但很多人漏写 as 别名，结果又退化成全局污染。
- 必须写
@use 'semantic/colors' as semantic-color，不能只写@use 'semantic/colors' - 别名要语义清晰，避免
as c或as v这种缩写 - 若真要扁平使用（如小项目），只能用
@use 'semantic/colors' as *;，但仅限semantic/层本身，组件内禁用 - Vite 等现代构建工具下，
@import若未配postcss-import，会原样输出路径导致 404
map + @each 才能支撑动态主题规则
纯变量无法表达“深色模式下所有间距放大 10%”这种条件逻辑。真正可维护的主题切换依赖 map 结构和 @each 遍历生成规则。
- 把间距、颜色、圆角等按主题维度组织为 map：
$spacing: (light: (sm: 4px, md: 8px), dark: (sm: 4.4px, md: 8.8px)); - 用
@each $theme, $config in $spacing动态输出.theme--#{$theme} .btn { padding: map-get($config, sm); } - 不要在 map 里塞复杂函数调用，先算好值再存进去，否则每次编译都重算，拖慢构建
最常被忽略的一点：变量不是写完就完事的——它得能被快速定位、安全替换、跨主题复用。没分层、没命名空间、没注释的变量文件，半年后就是项目里的定时雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
