lighten() 和 darken() 实际按 HSL 的 L 分量线性增减，非人眼感知亮度；深蓝#0a2b5c lighten(30%) 可能变灰白，浅黄#fff9c4 同操作溢出为 white，且 WCAG 对比度可能不达标。
lighten() 和 darken() 的实际效果不是“按亮度值调整”，而是按 HSL 色相环上的明度通道线性增减
很多人以为 lighten($color, 10%) 是把颜色的“亮度”（Luminance，即人眼感知的明暗）提升 10%，但 Sass 的 lighten() 实际操作的是 HSL 模型中的 L（Lightness）分量，它把颜色在 HSL 圆柱体中沿 L 轴上下平移。这意味着：深蓝 #0a2b5c 经 lighten(..., 30%) 可能变成灰白，而浅黄 #fff9c4 加同样参数会直接溢出为 white —— 它不感知色彩语义，也不保证可访问性对比度。
常见错误现象：lighten(#333, 20%) 得到 #7a7a7a，看似变亮，但 WCAG 对比度从 12.3:1 降到约 4.1:1，已不满足正文最小对比要求。
- 使用场景：适合 UI 元素悬停态、按钮禁用态等「视觉层级示意」，不适合替代可访问性调色逻辑
- 参数差异：
lighten($color, $amount)中$amount是百分比，范围 0%–100%，超出会钳位到 0 或 100 - 性能影响：无运行时开销，编译期计算，但过度嵌套调用（如
lighten(darken(lighten(...)))）会降低可读性
想真正控制亮度（Luminance），得先转成相对线性 RGB 再算，不能只靠 lighten()/darken()
Sass 原生函数无法直接计算 CIE Y 或 sRGB luminance（即 0.2126*R + 0.7152*G + 0.0722*B），必须手动实现转换。以下是一个轻量级函数示例，用于生成与原色具有指定相对亮度的目标色（保持色相与饱和度近似）：
@function luminance-adjust($color, $target-lum) {
$r: red($color) / 255;
$g: green($color) / 255;
$b: blue($color) / 255;
// 转 sRGB 线性光（gamma 校正逆运算）
$r-linear: if($r <= 0.04045, $r / 12.92, pow(($r + 0.055) / 1.055, 2.4));
$g-linear: if($g <= 0.04045, $g / 12.92, pow(($g + 0.055) / 1.055, 2.4));
$b-linear: if($b <= 0.04045, $b / 12.92, pow(($b + 0.055) / 1.055, 2.4));
// 计算当前 luminance
$current-lum: 0.2126 * $r-linear + 0.7152 * $g-linear + 0.0722 * $b-linear;
// 按比例缩放所有通道（粗略保色相）
$scale: $target-lum / $current-lum;
$r-new: min(1, max(0, $r-linear * $scale));
$g-new: min(1, max(0, $g-linear * $scale));
$b-new: min(1, max(0, $b-linear * $scale));
// 转回 sRGB 显示值
$r-out: if($r-new <= 0.0031308, $r-new * 12.92, 1.055 * pow($r-new, 1/2.4) - 0.055);
$g-out: if($g-new <= 0.0031308, $g-new * 12.92, 1.055 * pow($g-new, 1/2.4) - 0.055);
$b-out: if($b-new <= 0.0031308, $b-new * 12.92, 1.055 * pow($b-new, 1/2.4) - 0.055);
@return rgb(
round($r-out * 255),
round($g-out * 255),
round($b-out * 255)
);
}注意：该函数是近似方案，未做完整 HSL/HCI 色彩空间映射；真实项目中建议用 PostCSS 插件或构建时工具（如 colorjs.io）处理复杂亮度逻辑。
darken() 在深色背景上容易导致对比度崩溃，必须搭配 contrast-check 工具验证
例如对 #1e293b（深灰蓝）执行 darken(..., 15%)，结果是 #0f1622 —— 几乎纯黑，但在 OLED 屏幕上文字发虚，且与黑色背景对比度仅约 1.3:1，完全不可读。这不是函数 bug，而是设计误用。
- 务必在深色主题中避免对基础色反复
darken()，优先用mix($color, black, $weight)控制灰度混合比例 - 开发阶段应接入自动化检查：用
axe-core或 VS Code 插件Color Contrast Analyzer扫描生成色块 - 若需动态亮度适配（如系统深色模式响应），Sass 编译期无法监听，必须交由 CSS 自定义属性 + JS 运行时计算
lighten()/darken() 不支持透明度，alpha 会被直接丢弃
传入带 alpha 的颜色（如 rgba(10, 43, 92, 0.8) 或 hsla(...)）时，lighten() 和 darken() 会静默忽略透明度，仅对 RGB 部分运算，返回不透明色。这常导致组件状态切换时出现意外的“变实”现象。
正确做法：
- 先分离 alpha：
$alpha: alpha($color) - 对不透明版本调用
lighten()，再用rgba(..., $alpha)或transparentize($result, 1 - $alpha)补回透明度 - 更稳妥的方式：统一用
mix($color, white, $weight)或mix($color, black, $weight)，它们天然保留 alpha（Sass 1.40+）
真正难的不是写对一个函数，而是意识到 Sass 的颜色函数本质是“美术辅助工具”，而非“可访问性保障工具”。亮度感知、对比度阈值、设备渲染差异——这些都得在编译之外闭环。
