postcss - Fixing deprecated Sass color math operations

Question

I have just learned that it is no longer recommended to use math operators to compute colors in Sass stylesheets. It so happens that I have a block of code that computes colors using addition, subtraction and multiplication, but it is causing postcss to produce deprecation warnings:

// 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);

The actual warnings are:

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

I had a look at the color package but there does not seem to be an easy way of calculating a color based off another using simple math operators.

How would I go about fixing these deprecation warnings?

Answer 1

A helpful soul pointed me to the color.mix function as a potential solution. Gave it a fresh look this morning and, after some fiddling, finally got it to work. Ended up with the following:

$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);