从LESS迁移至CSS3：如何实现lighten与darken函数的等效功能？

• 使用CSS原生color-mix()函数
  这是最直接的替代方案，通过将目标颜色与白色按指定比例混合实现提亮效果，和LESS的lighten逻辑一致。把你的代码修改为：

  box-shadow: 0 0 var(--button-small-shadow-width) color-mix(in srgb, var(--colors-primary-blue), white var(--button-lighten-percentage));
  

  注意：--button-lighten-percentage需要是带%单位的数值，比如20%，代表混合20%的白色到主蓝色中。

• 使用HSL颜色通道计算
  借助CSS的颜色通道提取功能，把RGB颜色转成HSL后直接调整亮度值：

  box-shadow: 0 0 var(--button-small-shadow-width) hsl(from var(--colors-primary-blue) h s calc(l + var(--button-lighten-percentage)));
  

  这个方法需要保证计算后的亮度值不超过100%，否则颜色会变成纯白色；同时--button-lighten-percentage得是带%的增量值，比如15%。

你提到的预存提亮后颜色的方案确实不够规范，因为当基础色或提亮比例需要动态调整（比如主题切换）时，预存变量无法实时响应，而原生CSS函数可以直接基于变量计算，灵活性和维护性更强。

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