lighten()和darken()按hsl亮度通道固定步长调整，对#fff/#000无效；adjust-color()可同时控亮度与饱和度但需防荧光色；scale-color()用乘法缩放更稳；sass 4.0+推荐color.adjust()但需注意命名空间与精度差异。
怎么用 lighten() 和 darken() 而不翻车
这两个函数不是简单“加灰度”，而是按 HSL 色相环里固定步长调整亮度通道，所以对饱和度高的颜色效果明显，但对 #fff 或 #000 会直接失效——lighten(#fff, 10%) 还是 #fff，darken(#000, 10%) 也还是 #000。
常见错误是拿它们当“通用明暗调节器”，比如想让所有按钮文字在深色背景上自动变白，结果 lighten($bg, 40%) 在 #1a1a1a 上产出 #4d4d4d，根本不够亮。
- 优先用于已有中等饱和度的主色（如
#3498db），别强套在极亮/极暗色上 - 数值别超过
25%，否则容易失真或撞到边界值 - 如果要保对比度，搭配
contrast-color()判断后再选色，而不是硬调
adjust-color() 比 lighten() 更可控的场景
当你要同时微调亮度和饱和度（比如让一个品牌蓝在悬停时既亮一点又更活泼），adjust-color() 是唯一能一步到位的函数。它底层操作 HSL 值，参数明确：$lightness、$saturation、$hue 都可单独设。
典型误用是把它当“万能调色器”乱填参数，比如 adjust-color($color, $lightness: +30%, $saturation: +50%)，结果颜色发荧光——因为饱和度提升对暗色特别敏感。
- 暗色上调
$lightness时，同步微降$saturation（-5% ~ -10%）更自然 - 别用百分比符号写
$hue，它单位是度（$hue: 15deg合法，$hue: 15%报错） - 注意 Sass 版本：3.4+ 才支持关键字参数写法，老项目得写成位置参数
adjust-color($color, null, $lightness: 10%)
为什么 scale-color() 在主题系统里更稳
它不是“加减”，而是按比例缩放 HSL 各通道，所以对极端色（如 #000、#ff0）更友好。scale-color(#000, $lightness: 1.5) 会得到 #000，但 scale-color(#333, $lightness: 1.5) 就能合理变亮——因为它是乘法，不是加法。
问题常出在理解“缩放系数”：值 1.0 是原样，0.5 是减半，2.0 是翻倍。新手常填 150% 导致报错，必须写小数。
- 做深色模式适配时，用
scale-color($base, $lightness: 0.7)比darken($base, 30%)更一致 - 慎用
$saturation缩放 >1.2，尤其对低饱和灰，容易突兀 - IE 不吃这些函数，但编译后只是普通 HEX，只要最终 CSS 兼容就行，不用 runtime 处理
Sass 4.0+ 的 color.adjust() 新写法要注意什么
这是新语法，函数名带命名空间，参数全改用 map：color.adjust($color, $lightness: 10%)。好处是可读性强、支持更多通道（比如 $alpha），坏处是旧项目迁移时容易漏掉 color. 前缀，报 Undefined function color.adjust 错误。
另一个坑是它不兼容老 Sass 的全局函数名——你不能混用 lighten() 和 color.adjust() 在同一套逻辑里，因为返回值精度不同（后者默认保留更多小数位，可能影响 CSS 压缩）。
- 升级前先全局搜
lighten(、darken(，评估替换成本 - 新项目直接用
color.adjust()，别为了“统一”硬套旧函数 - 如果用了
postcss或css-vars动态换肤，别在 Sass 层过度计算，留到 runtime 更灵活
真正难的不是函数怎么写，而是判断该用哪个函数——取决于你是在修一个按钮，还是在搭一整套可伸缩的主题系统。前者随便挑，后者得把每个函数的边界条件列清楚，不然换色时某天突然发现灰色按钮文字在深灰背景上消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
