csssasscolorsdart-sass

What is the equivalent of adding an integer to a color in new SASS?

For a while, color arithmetic in SASS has been deprecated and not available in newer versions of the tool. I am currently migrating an older project which had color arithmetic.

For example, the older scss files has something like this:

background: $body-bg-color-dark-light + 10;

$body-bg-color-dark-light is a simple RGB value (like #FF1100)

What is the alternative using the new SASS color functions to reproduce the exact same functionality as above? Note that we are adding a simple integer and not a percentage.

Alternative I have tried is:

background: lighten($body-bg-color-dark-light, 10); 
// Note that '10' is not a percentage in the previous example

This does not produce the desired color. Also, since lighten and darken accept only percentages I am confused about the values that are greater than 100 in the code base that I am migrating.

The other problem is I am not able to obtain an older version of SASS (or locate which version for that matter) to figure what exactly was produced by simply adding an integer to a color so that I could apply the new color functions to produce the same result.

Edit:

I managed to dig up an old compiled version of that SCSS. One original value in that sample was #020507.

Adding 10 to that produced a result of #0c0f11. Looks like it is adding 10 (or A in hex) to every color channel.

Solution

  • Edit: thanks to the new example provided by OP the first hypothesis can be confirmed:

    #020507 + 10 = #020507 + #0A0A0A = #0C0F11

    I will make some conjectures here, but I can't seem to find an example similar to yours.

    On the SASS documentation about operators you can read:

    Early on in Sass’s history, it added support for mathematical operations on colors. These operations operated on each of the colors’ RGB channels separately, so adding two colors would produce a color with the sum of their red channels as its red channel and so on.

    Here are some examples given here and here:

    #020406 + #020406 = #04080c
#020406 * 2 = #04080c
#102030 + #010203 = #112233
#101010 * 2 = #202020

    In your example, an integer is added to the color; assuming that it's a decimal value, its hexadecimal value would be A.

    - 1st hypothesis (correct)

    If we do the operation as explained in the doc, it would mean that:

    #FF1100 + 10 = #FF1100 + #0A0A0A

    According to this calculator, the result would be:

    #FF1100 + #0A0A0A = 1091B0A

    I don't know very well how hexadecimal values work, but since the result is not a valid color I will assume that the red channel ignores the addition (since it already has the max value). So in the end we have:

    #FF1100 + 10 = #FF1B0A

    Now, the equivalent using SASS color functions would be using adjust-color:

    adjust-color(#FF1100, $red: 10, $green: 10, $blue: 10);

    - 2nd hypothesis (incorrect)

    The value is only added as it and not to each channels separately. So, using the same calculator:

    #FF1100 + 10 = #FF1100 + A = #FF110A

    And the equivalent with ajust-color:

    adjust-color(#FF1100, $blue: 10);