因为sass变量和css自定义属性分属编译期与运行时两个阶段，lighten()等sass函数无法作用于var(--color)这类运行时字符串，必须先用sass变量计算出值再通过#{}插值导出为css变量。
不能“无缝”——Sass 和 CSS 自定义属性运行阶段完全不同，强行混用只会踩坑。真要集成，必须明确分工：Sass 负责编译时计算与声明，CSS 变量负责运行时动态更新。
为什么 lighten($color, 10%) 不能套在 var(--color) 上？
Sass 编译时根本看不到 var(--color)，它只是字符串字面量；lighten() 只能作用于 Sass 变量（如 $color: #3498db）或静态值。试图写 lighten(var(--color), 10%) 会直接报错或输出无效 CSS。
- 错误示例：
--text-light: lighten(var(--text-color), 10%);→ Sass 解析失败 - 正确路径：先用
$text-color: #2c3e50计算出新值，再导出为另一个 CSS 变量，例如--text-light: #{lighten($text-color, 10%)} - 运行时变色必须用原生函数：
color-mix(in srgb, var(--primary), white 30%)或hsl(from var(--primary) h s calc(l + 10%))
--theme-color: #{$primary} 这种写法为什么有时失效？
不是 Sass 删了它，而是插值位置或变量未定义导致输出为空或字面量。
- 必须用
#{}包裹变量引用，--color: $primary会被原样输出成--color: $primary - 如果
$primary是null或未声明，插值结果为空，CSS 属性丢失 —— 建议加守卫：@if variable-exists(primary) { --color: #{$primary}; } - 颜色值不加引号，单位值（如
1rem）也不加；但字符串值（如ease-in-out）需加引号：--ease: "#{$ease-function}"; - 函数调用必须在插值内：
--shadow: #{shadow(0, 2px, 4px, rgba(0,0,0,0.1))}，不能写成--shadow: shadow(...)
怎么让 JS 读到的值和 Sass 里定义的一致？
JS 只能读取最终注入到 DOM 中的 CSS 自定义属性，完全看不到 Sass 变量。一致性靠单点源头 + 主动导出保障。
- 所有可变主题值只定义在 Sass 变量中（如
$brand-blue: #3498db），不在任何地方手写--brand-blue: #3498db - 统一在
:root或对应作用域中用#{}导出：:root { --brand-blue: #{$brand-blue}; --brand-blue-hover: #{darken($brand-blue, 10%)}; } - JS 修改变量后，Sass 不会感知；反过来，改了 Sass 变量但忘了重新导出，JS 读到的还是旧值 —— 每次变更必须同步检查导出逻辑
- 调试时可用
getComputedStyle(document.documentElement).getPropertyValue('--brand-blue')验证是否生效
真正容易被忽略的是：CSS 自定义属性的级联和作用域规则不受 Sass 控制，哪怕 Sass 编译出的 CSS 结构再漂亮，一旦在嵌套选择器里覆盖了 --color，JS 读到的就是那个局部值。别只盯着变量定义，得盯住最终生成的 CSS 规则链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
