rgba()和transparentize()语义不同：前者直接设alpha通道，后者实为mix(black,$color,$amount)的暗化操作；adjust-color()比lighten()/darken()更可控，避免HSL亮度溢出。
直接用 rgba() 或 transparentize() 处理透明度，用 adjust-color() 替代 lighten()/darken() 控制明度——前者语义清晰、类型安全；后者可预测、不溢出。别被函数名带偏，transparentize() 不是设 alpha，lighten() 也不是提亮度。
为什么 rgba($r, $g, $b, $a) 总报错或输出 NaN？
因为 Dart Sass 的 rgba() 函数根本不接受四个独立变量作为参数。它只认两种调用形式：rgba($color, $alpha)（$color 是合法 color 类型，如 #3b82f6）或 rgba(59, 130, 246, 0.3)（所有数字必须是字面量）。哪怕 $r: 59 是纯数字，rgba($r, $g, $b, $a) 也会被拒绝。
- 错误现象：编译失败，或生成
rgba(NaN, NaN, NaN, 0.4)，页面背景变黑/消失 - 正确路径：先用
rgb($r, $g, $b)构造颜色值，再传给rgba($color, $a) - 若已有十六进制变量
$primary: #3b82f6，直接写rgba($primary, 0.3)最简洁 - 注意：
$r等变量不能带单位（如59px）或引号（如"59"）
transparentize() 和 opacify() 真的是“调透明度”吗？
不是。它们本质是 mix(black, $color, $amount) 和 mix(white, $color, $amount) 的语法糖，结果是颜色变暗/变亮，而非仅降低/提升 alpha 通道。比如 transparentize(#ff0000, 0.3) 输出的是 #cc0000（不透明的暗红），不是 rgba(255, 0, 0, 0.7)（半透亮红）。
- 想保持色相只改透明度？坚持用
rgba($color, $a)或hsla(hue($c), saturation($c), lightness($c), $a) -
transparentize($color, $amount)中$amount越大，越接近黑色；$amount: 0才等于原色 - 若
$color本身含 alpha（如rgba(0,0,0,0.8)），函数会先转 sRGB 再混合，结果难预测 - 语义上更推荐：用
transparentize()表达“让某色视觉上更‘虚’”，用rgba()表达“构造一个带透明通道的新色”
lighten()/darken() 为什么总调出奇怪的颜色？
因为它们只是线性增减 HSL 的 L（Lightness）值，不是人眼感知的亮度（Luminance）。对浅色（L ≈ 100%）调 lighten() 会直接溢出为 white；对深色（L ≈ 0%）调 darken() 完全无效；且完全不保证 WCAG 对比度。
立即学习“前端免费学习笔记（深入）”；
- 常见翻车：从
#333调lighten(20%)得到#7a7a7a，文本对比度从 12.3:1 降到 4.1:1，已不满足 AA 标准 - 替代方案：
adjust-color($color, $lightness: 20%)支持绝对值，不会意外溢出，结果更可控 - 深色模式适配时，避免在 CSS 变量里硬写
#{darken($primary, 15%)}—— Sass 编译完就固定了，无法响应系统主题变化 - 真正需要亮度（Luminance）调节？得手动实现 gamma 校正 + Y 计算，Sass 原生函数做不到
如何让 CSS 变量也支持运行时透明度调节？
Sass 在编译期无法解析 var(--primary)，所以 rgba(var(--primary), 0.6) 必然失败。浏览器也不认这种写法。唯一可靠路径是把颜色拆成 R/G/B 三通道变量。
- 手动解十六进制：把
#3498db拆为--primary-r: 52; --primary-g: 152; --primary-b: 219 - 然后用：
background-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.6); - 别依赖
color-mix()或oklch()来“动态算”——它们虽原生，但目前仍需检查 Chrome 111+/Safari 16.4+/Firefox 117+ 兼容性 - 如果必须运行时调整明度，用 HSL 变量 +
calc()：定义--primary-l: 50%，再写hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%))
最易被忽略的一点：所有 Sass 颜色函数都是编译期静态计算，一旦输出 CSS，就和 Sass 彻底脱钩。所谓“动态”，只存在于你组织变量和函数调用的逻辑里；真要运行时响应，得靠 CSS 变量拆分、JS 注入，或现代 CSS 原生能力兜底。
