Sass已弃用颜色数学运算的修复方案咨询

你遇到的这个问题是Sass官方在新版本里明确弃用了直接对颜色值使用加减乘除的操作——这种手动运算在颜色空间处理上不够严谨，官方更推荐用专门的颜色函数来实现颜色混合或调整逻辑。

你的代码本质上是在两个颜色之间按固定比例插值混合，最适合用Sass的mix()函数来替换，它会自动处理RGB通道的正确混合，完全避免手动运算可能出现的通道值溢出或颜色逻辑错误。

下面是针对你每个变量的精准替换方案：

• $gray-25：原代码是从$gray-100向#fff移动3/4的距离，相当于25%的$gray-100混合75%的#fff，用mix实现：

  $gray-25: mix($gray-100, #fff, 25%);
  

• $gray-50：原代码是$gray-100和#fff各占一半，直接用50%权重混合：

  $gray-50: mix($gray-100, #fff, 50%);
  

• $gray-75：原代码是75%的$gray-100混合25%的#fff，对应：

  $gray-75: mix($gray-100, #fff, 75%);
  

• $gray-150：原代码是$gray-100和$gray-200的中间色，用50%权重混合即可：

  $gray-150: mix($gray-100, $gray-200, 50%);
  

补充说明 #

mix($color1, $color2, $weight)函数的第三个参数$weight是第一个颜色（$color1）在混合结果中的占比，取值范围是0%-100%。如果省略这个参数，默认是50%，也就是两个颜色各占一半。

如果只是需要调整单个颜色的亮度，还可以用lighten()或darken()函数，但你的场景是基于两个已有颜色生成中间色，mix()是最精准且贴合需求的选择。

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