lighten()和darken()不能生成等间隔色阶，因其按hsl的l值线性增减，而人眼对明暗感知非线性，导致浅色区变化不显、深色区过快溢出；需用hsl()手动插值或预定义色阶。
为什么 lighten() 和 darken() 不能直接生成等间隔色阶
这两个内置函数按“视觉明度”调整颜色，但底层是 HSL 模型中的 L 值线性增减，而人眼对明暗变化非线性敏感——导致相邻色阶在浅色区挤在一起、深色区拉开过大。比如用 lighten($base, 5%) 连续调 10 次，前 3 步几乎看不出变化，后 3 步已接近白色。
真正可控的色阶需要固定步长的 hsl() 或 oklch() 坐标插值，Sass 原生不支持 OKLCH，所以稳妥做法是转到 HSL 空间手动计算 L 值，再封装成自定义函数。
- 不要依赖
adjust-color()的$lightness参数做循环，它和lighten()底层一致 - 避免在循环中反复调用
hsl()构造器——Sass 编译时无法优化嵌套调用，性能差且易报Stack level too deep - 输入色必须是明确的
#rrggbb或rgb()字面量；若传入变量（如$primary），需确保它在编译期已解析为具体颜色值
如何写一个安全的 generate-hsl-scale() 自定义函数
核心是把颜色转成 HSL 元组，提取 $h、$s、$l，然后对 $l 做等差序列，最后批量构造 hsl($h, $s, $new-l)。Sass 不支持数组 map，所以用列表 + nth() 模拟：
@function generate-hsl-scale($color, $steps: 5, $min-l: 20%, $max-l: 90%) {
$hsl: hsl(hue($color), saturation($color), lightness($color));
$h: hue($color);
$s: saturation($color);
$l-base: lightness($color);
<p>// 防止越界：强制把 base L 锁进 [min, max] 区间
$l-base: max($min-l, min($max-l, $l-base));</p><p>$scale: ();
@for $i from 1 through $steps {
// 等差插值：从 min 到 max，共 $steps 个点
$l-val: $min-l + ($max-l - $min-l) * ($i - 1) / max(1, $steps - 1);
$scale: join($scale, hsl($h, $s, $l-val));
}
@return $scale;
}</p>
调用时注意：generate-hsl-scale(#3b82f6, 7) 返回一个包含 7 个颜色的列表，需配合 @each 或 nth() 使用，不能直接当单个颜色值塞进 background-color。
如何避免 hsl() 在深色/高饱和下溢出失真
HSL 模型里，同一 $h 和 $s 下，$l 并非所有取值都对应合法颜色——比如 hsl(0, 100%, 99%) 实际渲染为极浅灰而非纯白，hsl(180, 100%, 1%) 可能变成不可见黑点。这不是 Sass 错误，而是 CSS 渲染引擎对 HSL 的 clamping 行为。
- 实测安全区间：对多数色相，
$l控制在10%–95%内较稳；若需更广范围，改用oklch()（仅现代浏览器支持） - 不要试图用
mix(white, $color, $pct)替代——它走的是 RGB 插值，色相会漂移，尤其在蓝/紫系上明显发灰 - 若目标是语义化色阶（如
blue-50到blue-900），建议预生成固定映射表，而非运行时计算，避免编译膨胀
生成 CSS 类名时怎么避免重复编译开销
每次调用 generate-hsl-scale() 都会重新算一遍列表，如果在 @each 循环里生成 10 套色阶，编译时间指数增长。正确做法是「一次计算，多次引用」：
$blue-scale: generate-hsl-scale(#3b82f6, 10);
@each $color in $blue-scale {
$i: index($blue-scale, $color);
.bg-blue-#{$i} {
background-color: $color;
}
}
关键点：$blue-scale 是编译期常量，后续所有 @each 和 index() 都基于它，不会重复执行函数体。如果把 generate-hsl-scale() 直接塞进 @each 条件里，Sass 会为每个循环迭代重跑整个函数逻辑，极易触发栈溢出。
最易被忽略的是：Sass 函数返回值一旦参与 index() 或 length()，就必须是确定长度的列表——这意味着你不能在函数里用条件判断动态决定返回几个颜色，否则编译器无法静态分析长度，可能报错或行为异常。
