scss变量应使用语义化命名（如$color-primary）而非物理值命名（如$blue-500），以准确表达设计角色、支持主题切换、降低维护成本并提升团队协作效率。
因为 SCSS 变量名直接表达设计意图，而不是颜色物理值。写 $color-primary 比写 $blue-500 或 #007bff 更能让人一眼看懂“这是品牌主色”，后续换色、协作、维护都省力。
SCSS变量命名如何影响语义传达
语义化不是靠注释补救的，而是靠变量名本身承载含义。当你在代码里看到 $color-success，就知道它对应“操作成功状态”，而 $green-600 只说明它是某套色板里的一个绿色——设计系统一调整，后者立刻失效。
-
$color-primary→ 表达角色（主色），与品牌规范对齐 -
$spacing-lg→ 表达用途（大间距），而非具体像素值 -
$font-size-heading→ 表达层级关系，不是“24px”这种实现细节
为什么$blue-500这类命名在项目演进中会失效
这类命名把设计决策锁死在视觉实现上。一旦设计师把主色从蓝色换成紫色，所有叫 $blue-500 的变量就变成误导性名称；更糟的是，你可能还要改 $blue-400、$blue-600……实际却没人再用“蓝色”了。
- 搜索替换成本高：必须人工判断哪些“blue”变量真该改，哪些只是历史遗留
- 无法支持多主题：语义变量如
$color-primary可被不同主题文件重定义；物理命名则需整套重写 - 团队协作障碍：新成员看到
$indigo-700不知道它在 UI 中承担什么角色
SCSS变量和CSS变量在语义化上的分工差异
SCSS变量是编译期静态控制点，适合做“设计系统骨架”；CSS变量是运行时动态载体，适合做“主题切换开关”。两者配合才能真正落地语义化。
- SCSS 层定义
$color-primary: #007bff，然后生成:root { --primary-color: #007bff; } - CSS 层用
var(--primary-color)，前端 JS 可随时切换document.documentElement.style.setProperty('--primary-color', '#6a5acd') - 别把所有颜色都塞进 SCSS 变量：比如按钮 hover 色可以用
darken($color-primary, 10%)动态计算，不另起变量名
容易被忽略的坑：变量作用域混乱导致语义断裂
SCSS 变量没有作用域继承，只认文本顺序。如果你在 _theme.scss 里定义了 $color-primary，但 _button.scss 在它之前 @use，那 .button 里就根本用不了这个语义变量——结果只能硬写 #007bff 救急，语义链当场断掉。
- 所有变量定义文件必须在使用前
@use，推荐统一在index.scss顶层导入 - 避免跨模块覆盖：不要在组件文件里重写
$color-primary，该换主题就换整个:root变量 -
!default看似灵活，实则让语义归属模糊——谁定义的？谁覆盖的？查起来费劲
真正难的不是命名规则，而是坚持让每个变量名回答一个问题：“它在设计系统里扮演什么角色？” 这个习惯一旦松动，语义化就退化成一堆带注释的十六进制值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
