sass颜色函数（如darken、rgba）要求严格类型校验，传入非color类型变量会报错或输出nan；正确做法是确保输入为原生color值或先用rgb()构造再套rgba()。
直接原因：Sass颜色函数（如 darken、transparentize、rgba）的输入类型或调用方式不合法，导致编译器无法正确解析或静默降级为无效值。
传入非颜色类型变量会返回 NaN 或编译失败
Sass 颜色函数严格校验参数类型。哪怕变量值是合法颜色，只要类型不是 color，函数就拒绝计算。
-
darken($base, 10%)中$base是字符串"#3b82f6"→ 编译报错Function darken expects a color -
$base: "var(--primary)"→ 即使 CSS 变量最终是颜色，Sass 也无法识别，darken($base, 10%)直接失效 - 正确做法：先用
to-color($base)转换（仅支持标准格式如"#fff"、"red"），或确保原始定义就是颜色字面量：$base: #3b82f6;
rgba() 函数误用 RGB 分量变量
rgba($r, $g, $b, $a) 看似合理，但 Dart Sass 明确不支持这种签名——它只认 rgba($color, $alpha) 或 rgba(255, 130, 64, 0.7)（后三者必须是字面数字）。
- 错误写法：
$r: 59; $g: 130; $b: 246; background-color: rgba($r, $g, $b, 0.3);→ 输出rgba(NaN, NaN, NaN, 0.3) - 正确路径：先
rgb($r, $g, $b)构造颜色，再套rgba()：rgba(rgb($r, $g, $b), 0.3) - 已有十六进制变量？直接
rgba($base-color, 0.3)更安全简洁
函数嵌套顺序或作用域导致值未就绪
颜色函数执行在编译期，所有依赖必须在调用时已完全求值。常见陷阱是变量尚未定义、被覆盖，或来自不同模块的作用域隔离。
- 在
@use "theme"的模块里调用darken(theme.$primary, 10%)，但theme.scss中$primary是!default且未被外部注入 → 实际值为null，darken(null, 10%)报错 - 用
@import混入旧文件，_colors.scss在_functions.scss之后加载 → 函数调用时变量未声明 - 调试建议：在函数调用前加
@debug $base;，确认输出是color类型而非null或string
最易被忽略的是：颜色函数不“理解” CSS 变量，也不参与运行时逻辑。你看到的“不符”，几乎总是编译期静态求值失败的结果，而不是浏览器渲染偏差。检查类型、校验顺序、避免字符串拼接，比调色板本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
