新版SASS中给颜色值添加整数的等效替代实现方案是什么？

旧版SASS中对颜色直接加减整数的逻辑是将R、G、B三个通道的十进制数值分别加减对应整数，单个通道结果会自动截断在0~255区间内，最后合并为新的RGB颜色，和你找到的样本表现完全匹配：#020507的三个通道十进制值为2、5、7，各加10得到12、15、17，转十六进制后就是0C、0F、11，合并结果就是#0c0f11。

要在新版SASS中复现该效果，直接使用内置的color.adjust()函数即可，代码如下：

// 替换原先的 $body-bg-color-dark-light + 10
background: color.adjust($body-bg-color-dark-light, $red: 10, $green: 10, $blue: 10);

如果需要加减的数值是变量，可以写成通用形式：

$offset: 10; // 要加减的整数值，减法场景设为负数即可
background: color.adjust($body-bg-color-dark-light, $red: $offset, $green: $offset, $blue: $offset);

注意事项 #

• color.adjust()会自动处理通道值溢出问题，单通道数值超过255自动取255，低于0自动取0，完全适配数值大于100的场景
• 不要使用lighten()/darken()函数，二者是调整HSL颜色模型的亮度通道，和RGB逐通道加减的逻辑完全不同，无法得到预期结果

内容的提问来源于stack exchange，提问作者Nandeep Mali