SCSS变量声明必须置于所有引用它的文件最前面，否则编译报错；主题切换需通过CSS自定义属性实现，而非仅重赋SCSS变量；颜色命名应语义化（如$color-primary），避免色阶命名；多主题应共用入口，用[data-theme]控制分支，防止体积膨胀。
SCSS变量声明必须放在所有引用它的文件最前面
SCSS里$primary-color这类变量不是“定义即生效”，而是依赖于编译时的引入顺序。如果你在_button.scss里用了$primary-color，但它的声明在_button.scss之后才被@import，编译会直接报错Undefined variable: "$primary-color"。
实操建议：
- 建一个单独的
_variables.scss，只放所有主题色、间距、字体等基础变量，不写任何样式规则 - 在入口
main.scss顶部用@import 'variables';，且这行必须是第一个@import - 避免在局部文件里重复声明同名变量（比如
_theme-dark.scss里再写$primary-color: #2563eb;），会导致覆盖不可控
主题色切换不能只靠变量重赋值，得配合CSS自定义属性
纯SCSS变量在编译后就固化成具体值了，没法运行时切换。想实现深色/浅色一键切换，必须把SCSS变量映射到CSS自定义属性（--primary-color），再用JS或媒体查询动态改这些属性。
实操建议：
- 在
_variables.scss里定义SCSS变量：$primary-color: #3b82f6; - 在
_root.scss里导出为CSS变量：:root { --primary-color: #{$primary-color}; } - 组件中统一用
color: var(--primary-color);，而不是color: $primary-color; - 深色主题另建
:root[data-theme="dark"]块，覆盖--primary-color值，不用动SCSS逻辑
颜色变量命名要带语义，别用$blue-500这种纯色阶名
$blue-500看似直观，但换主题时你要全局搜索替换所有blue相关变量，还容易和$indigo-500混淆。更麻烦的是，设计稿说“主按钮用品牌蓝”，你得先查文档确认这个蓝对应哪个色阶。
实操建议：
- 用功能+状态命名：
$color-primary、$color-primary-hover、$color-border-divider - 保留色阶变量但加前缀：
$palette-blue-500（仅供内部计算，不直接用于组件） - 用
lighten()/darken()函数从$color-primary派生悬停色，而不是手写$color-primary-hover: #2563eb; - 导出时用
map-get($theme-map, 'primary')替代硬编码，方便后期接入主题配置JSON
多主题打包时，避免重复编译导致CSS体积膨胀
有人会为每个主题写一个入口SCSS（theme-light.scss、theme-dark.scss），然后分别编译——结果生成两份几乎一样的CSS，只有几行颜色值不同，白占一倍体积。
实操建议：
- 只保留一个
main.scss入口，用:root+data-theme属性控制样式分支 - 深色主题的差异规则写在
[data-theme="dark"]选择器下，而非独立文件 - 如果必须分离输出（如微前端场景），用SCSS的
map+@each循环生成主题类，而不是复制粘贴整套样式 - 检查最终CSS里是否出现
.btn[data-theme="dark"] .btn__text这种冗余选择器——说明嵌套过深，该提级到:root[data-theme="dark"]下统一控制
真正难的不是声明几个$color-xxx，而是让设计师改一个色值，前端不用改代码、不重新部署就能生效；以及当产品突然说“iOS端要用一套新配色”，你能五秒内切出预览版。这些都卡在变量分层和CSS变量桥接的设计上，而不是语法本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
