不能在 SCSS 编译期用 var(--primary-color) 参与 mix()、lighten() 等颜色运算，因为 var() 是运行时解析的 CSS 字符串，SCSS 编译时无法识别为颜色值，必须由 JS 或 CSS 原生函数在运行时处理。
直接说结论：不能在 SCSS 编译期用 var(--primary-color) 去参与 mix()、lighten() 或任何颜色函数运算——SCSS 会报错，因为 var() 是运行时才解析的 CSS 值，而 SCSS 在构建阶段就完成了所有计算。
SCSS 只能管“静态主题配置”，不能接管 CSS 变量的运行时行为
很多人试图这么写：
$base: var(--primary-color);
.demo { color: mix($base, #fff, 30%); }
结果是 SassError: argument $color-1 of mix() must be a color。原因很实在：
- SCSS 编译发生在页面加载前，此时
--primary-color还没被 JS 设置，甚至 DOM 都不存在 -
var(--x)对 SCSS 来说就是一串普通字符串，不是颜色值，无法参与色值运算 - 所有依赖颜色推导的逻辑（比如生成浅色背景、hover 透明度、禁用态灰阶）必须交由 JS 或纯 CSS 完成
正确分工：SCSS 定义主题“骨架”，CSS 变量承载“可变色值”
把 SCSS 当作主题元数据管理器，只做三件事：
立即学习“前端免费学习笔记（深入）”；
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 用 map 存储各主题的原始色值，例如
$themes: (light: (#4762FE, #fff), dark: (#1d1d1d, #121212)) - 用
@each和[data-theme="xxx"]选择器批量生成初始 CSS 变量声明（仅用于首次渲染或降级） - 通过
@function themed($key)提取当前主题下的静态值，供不依赖动态换肤的场景使用（如 SSR 首屏、打印样式）
真正驱动换肤的，是 JS 修改 :root 或 html[data-theme] 上的变量：
document.documentElement.style.setProperty('--primary-color', '#50B399');
所有组件样式都用 var(--primary-color) 直接消费，不经过 SCSS 中转。
衍生色必须用 JS 或 HSL/CSS 函数 runtime 计算
如果你需要 “主色 + 20% 亮度 = hover 色”，有且仅有两种靠谱路径：
-
JS 动态计算并设为新变量：用
tinycolor2或原生hsl()字符串拼接，再setProperty('--primary-hover', 'hsl(200, 100%, 70%)') -
CSS 原生函数（推荐）：直接在 CSS 里写
background-color: color-mix(in srgb, var(--primary-color), white 80%)（需现代浏览器）或background-color: hsl(from var(--primary-color) h s calc(l + 10%))
别再尝试让 SCSS 混合 var() —— 它做不到，也不该做。编译期和运行时的边界必须划清。
最易被忽略的一点：:root 上定义的变量会被继承，但一旦你在某个组件内部用 div { --primary-color: red } 覆盖，后代元素读取的就是这个局部值。换肤时若想全局生效，务必确保 JS 修改的是 document.documentElement，而不是某个中间容器。
