sass 没有 color() 函数，常见误认的是 rgb()/hsl()/mix()/lighten()/transparentize() 等；transparentize() 优于 rgba() 因其保留颜色类型可组合；lighten()/darken() 易失真，推荐 mix($color, white/black)；所有 sass 颜色函数均在编译期执行，无法响应运行时主题切换。
直接用 color 函数在 Sass 里处理主题色基本没用——Sass 根本没有叫 color 的内置函数。你搜到的 color 很可能是拼写错误、文档混淆，或是把 CSS 原生 color 属性当成了 Sass 函数。
为什么找不到 color() 函数？
Sass 官方颜色函数列表里没有 color()。常见被误认成它的，其实是：
-
rgb()/rgba()：构造颜色，但首参必须是 Sass color 类型（如#3498db），不能是字符串或 CSS 变量 -
hsl()/hsla()：同理，参数需为数值，不是"200, 50%, 60%"这种字符串 -
mix()、lighten()、darken()、transparentize()：这些才是真正在编译期运算颜色的函数
如果你写了 color($primary, 0.6) 并报错 Undefined function.，那是因为它根本不存在。
rgba() 和 transparentize() 怎么选？
两者都调透明度，但行为和适用场景不同：
-
rgba($primary, 0.6)返回一个固定字符串（如rgba(52, 152, 219, 0.6)），不能再参与后续颜色运算 -
transparentize($primary, 0.3)返回仍是 Sass color 类型，可继续传给lighten()或mix() - 推荐优先用
transparentize()：语义清晰（“让原色变透明”），且保留类型可组合性 - 别写
rgba("#3498db", 0.6)——引号让它变成字符串，Sass 会报Argument `$color` must be a color
主题色明暗变体该用 lighten() 还是 mix()？
对浅底色（比如 #f9fafb）调亮，lighten() 容易失真甚至变灰紫；对深色（如 #111827）调暗，darken() 可能直接压成纯黑。
- 更可控的做法：
mix($primary, white, 10%)（加白提亮）、mix($primary, black, 10%)（加黑加深） -
lighten($color, 10%)参数是百分比，不是小数（0.1会报错） - 极亮色（
#fff）调lighten()无效，极暗色（#000）调darken()同样无效——函数内部会 clamp，但结果不可控 - 按钮悬停态、禁用态等状态色，建议单独定义变量（如
$primary-hover），别靠链式调用推导
主题切换时，Sass 颜色函数生成的值能响应变化吗？
不能。所有 Sass 颜色函数（lighten、mix、transparentize）都在编译期执行，输出的是静态 CSS 值。一旦编译完成，它们就和 JS、CSS 变量、@media (prefers-color-scheme) 完全无关。
- 如果你在
dark.scss里写background-color: lighten($bg-dark, 5%)，它只会在 dark 主题 CSS 文件里生成一个固定色值 - 想实现运行时切换，必须靠 CSS 自定义属性 +
var(--bg-color)，Sass 只负责生成初始值（比如--bg-color: #111827;） - 别试图在 Sass 里写
@media (prefers-color-scheme: dark) { color: lighten($text-light, 20%) }——这只会把亮色主题下的计算结果也塞进暗色媒体查询里，造成冗余和覆盖
真正要动的，是构建流程：为 light/dark 各跑一次 Sass 编译，而不是指望单个文件里靠函数“智能适配”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
