应使用 lightness() 判断背景色明暗，它返回 HSL 亮度值（0–100），对所有合法 CSS 颜色有效且已做感知加权；建议临界值设为 40–45，透明度不影响结果。
SCSS 中如何用 lightness() 判断背景色明暗
直接看结论：别用 red()/green() 拆通道，lightness($color) 是最可靠、语义最清晰的明暗判断依据。它返回的是 HSL 模型中的亮度值（0–100），对任意合法 CSS 颜色（#fff、rgb(30, 40, 50)、hsl(200, 100%, 60%)、rebeccapurple）都有效。
常见错误是试图用 red($c) > 128 或 luminance($c)（后者不是内置函数，容易误装第三方库）。SCSS 原生只认 lightness()，且它已做了人眼感知加权，比简单算 RGB 平均值更准。
-
lightness(#000)→0，lightness(#fff)→100 - 临界值建议设为
40或45：低于该值认为是深色背景，文字用浅色；否则用深色文字 - 注意：
lightness(hsla(0, 0%, 50%, 0.5))仍返回50—— 透明度不影响亮度计算
写一个可复用的 text-color-for() 函数
把判断逻辑封装成函数，避免每个地方重复写 if(lightness($bg) 。函数名要直白，参数明确，返回值必须是颜色值（不是字符串）。
@function text-color-for($bg) {
@return if(lightness($bg)
<p>使用时直接传入变量或字面量：</p>
color: text-color-for($primary);color: text-color-for(#2c3e50);- 不支持传入未解析的变量名（如
text-color-for("primary")），SCSS 不做运行时字符串求值
处理主题色变量组时，避免硬编码重复逻辑
当有一组主题色（$theme-primary、$theme-success、$theme-warning）需要各自配文字色时，不要为每个写一遍 if。用 @each 批量生成 CSS 类，或提前生成对应文字色变量。
推荐方式：在定义主题色的同时，顺手定义其配套文字色：
$theme-primary: #3498db; $text-primary: text-color-for($theme-primary); $theme-success: #2ecc71; $text-success: text-color-for($theme-success);
这样后续写样式时语义清晰：color: $text-success;。比每次调用函数更轻量，也方便后期覆盖（比如让所有 success 文字强制用深灰，只需改一行 $text-success）。
- 若主题色来自外部配置（如 JSON 导入），则必须用函数动态计算，不能预定义变量
- 不要在
@each循环里嵌套复杂函数调用——编译期无性能问题，但可读性差，调试困难
为什么不能只靠对比度自动适配 WCAG？
lightness() 只管明暗倾向，不管对比度是否达标。比如 #ff0（黄色）和 #ff6（浅黄）的 lightness() 分别是 100 和 80，都触发“深色文字”，但 #ff0 on #ff6 的对比度只有 ~1.1:1，完全不满足 WCAG AA（最低 4.5:1）。
所以这个逻辑只适合「背景色固定、文字色需基础适配」的场景（如按钮、徽章、卡片标题）。真要合规，得用专门的对比度检测工具（如 contrast-ratio() 函数，需手动引入或用 PostCSS 插件），并且接受：高亮色（黄、浅绿）几乎必然要配深灰而非纯黑。
最容易被忽略的一点：设计师给的「深灰背景」可能是 #333（lightness: 20），也可能是 #4a4a4a（lightness: 30）——后者用 white 虽然可读，但对比度仅 5.3:1，刚过 AA 线；而前者是 12.5:1。临界值设死 45 会掩盖这种差异，实际项目中建议配合设计规范微调阈值，或直接要求设计师提供最小对比度保障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
