修复已弃用的 Sass 颜色数学运算

Question

我刚刚得知不再推荐使用数学运算符来计算 Sass 样式表中的颜色。碰巧我有一段代码使用加法、减法和乘法计算颜色，但它导致 postcss 产生弃用警告：

// Extension to Bootstrap's base colors
$gray-25: $gray-100 + ((#fff - $gray-100) / 4) * 3;
$gray-50: $gray-100 + ((#fff - $gray-100) / 4) * 2;
$gray-75: $gray-100 + ((#fff - $gray-100) / 4);
$gray-150: $gray-100 + (($gray-200 - $gray-100) / 2);

实际的警告是：

DEPRECATION WARNING on line 4 of /path/to/scss/_variables.scss:
The operation `#fff minus #f8f9fa` is deprecated and will be an error in future versions.
Consider using Sass's color functions instead.
http://sass-lang.com/documentation/Sass/Script/Functions.html#other_color_functions

我看过 color package 但似乎没有一种简单的方法可以使用简单的数学运算符根据另一种颜色计算颜色。

我将如何修复这些弃用警告？

Answer 1

一位乐于助人的人向我指出 color.mix 函数是一个潜在的解决方案。今天早上给它一个新的外观，经过一些摆弄，终于让它工作了。结果如下：

$gray-25: mix($gray-100, #fff, 25%); // $gray-100 + ((#fff - $gray-100) / 4) * 3;
$gray-50: mix($gray-100, #fff, 50%); // $gray-100 + ((#fff - $gray-100) / 4) * 2;
$gray-75: mix($gray-100, #fff, 75%); // $gray-100 + ((#fff - $gray-100) / 4);
$gray-150: mix($gray-100, $gray-200, 50%); // $gray-100 + (($gray-200 - $gray-100) / 2);

修复已弃用的 Sass 颜色数学运算

Fixing deprecated Sass color math operations

sass

postcss