原生 CSS 变量不能被 Sass 函数计算，因 Sass 编译时无法访问运行时的 var(--x)；需用 Sass 变量（如 $brand-blue）配合 #{lighten($brand-blue, 10%)} 导出为 CSS 自定义属性，JS 仅操作 --x 实现动态主题。
原生 CSS 变量不能直接被 Sass 函数计算
这是最常踩的坑：把 --primary-color: #3498db 定义在 :root 里，然后在 Sass 中写 lighten($primary-color, 10%) —— 报错。Sass 编译时根本看不到运行时才存在的 CSS 自定义属性，$primary-color 根本没被声明，更别说参与计算了。
真正能用 Sass 函数处理的，只能是 Sass 变量（$ 开头）或内联值。原生变量是浏览器运行时解析的字符串，Sass 在构建阶段早已跑完了。
- 想动态变色？必须用
color-mix()、hsl()等原生 CSS 函数配合var(--x)，不能依赖darken()这类 Sass 函数 - 需要 Sass 计算逻辑（比如生成调色板）？得先把基础色定义成
$brand-blue: #3498db，再用它派生出--brand-blue-light等，最后通过:root { --brand-blue: #3498db; --brand-blue-light: #{lighten($brand-blue, 10%)}; }注入 - 别试图用
#{var(--x)}拼接进 Sass 表达式——语法非法，Sass 解析器直接报Invalid CSS after "..."
Sass 变量如何安全导出为 CSS 自定义属性
用 #{...} 插值是最常用也最稳妥的方式，但要注意单位、引号和空格的处理。
例如：
立即学习“前端免费学习笔记（深入）”；
:root {
--font-size-base: #{$font-size-base}; // ✅ 输出: --font-size-base: 1rem;
--border-radius-sm: #{$border-radius-sm}; // ✅ 输出: --border-radius-sm: 4px;
--shadow: #{shadow(0, 2px, 4px, rgba(0,0,0,0.1))}; // ✅ 先计算再注入
}
- 颜色值无需引号：
--color-text: #{$text-color}→--color-text: #2c3e50；加了引号反而变成字符串字面量 - 带函数的表达式必须包裹在
#{...}内，且函数需是 Sass 原生支持的（如rgba()、percentage()），不能是浏览器函数（如calc()） - 如果 Sass 变量是
null或未定义，插值会输出空字符串，导致 CSS 无效；建议加@if variable-exists(...)守卫
如何在 JS 中读写时兼顾 Sass 和原生变量的一致性
很多项目同时用 Sass 定义主题色、又靠 JS 动态切换暗色模式，这时容易出现“Sass 里改了 $color-primary，但 JS 读 getComputedStyle 拿到的还是旧值”——根本原因是：Sass 变量不参与运行时，只有注入到 :root 的那部分自定义属性才是 JS 可见的。
- 维护单点来源：所有可变主题值只定义在 Sass 变量中，再统一导出到
:root；JS 只读/写document.documentElement.style.setProperty('--x', ...) - 避免重复定义：不要在 JS 里硬编码颜色值，也不要让 Sass 和 CSS 文件各自维护一套同名变量（比如 Sass 有
$primary，CSS 里又写--primary: #007bff） - 调试技巧：在 DevTools 的 Styles 面板里检查
:root下是否真有对应属性；用getComputedStyle(document.documentElement).getPropertyValue('--primary')验证 JS 是否能读取
暗色模式下 Sass 如何响应 CSS 自定义属性变化
Sass 本身无法响应媒体查询或 prefers-color-scheme 的运行时变化——它只编译一次。所谓“Sass 响应暗色模式”，其实是靠预定义两套变量 + 条件注入实现的静态适配。
- 典型做法：定义
$colors-light和$colors-dark映射表，用@each循环分别注入:root和@media (prefers-color-scheme: dark)块内 - 注意作用域：Sass 的
@media是嵌套规则，最终生成的是纯 CSS 媒体查询，不是“监听”行为 - 如果需要 JS 触发的动态主题切换（比如用户手动点开关），就得靠 JS 修改
:root上的变量，并确保所有样式都基于var(--x)编写，Sass 此时只负责初始值生成
真正难的不是怎么写，而是守住变量边界：Sass 管构建时的确定性，CSS 自定义属性管运行时的灵活性，混用的前提是分清谁在什么时候起作用。
