2

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.

Nandeep Mali
  • 4,456
  • 1
  • 25
  • 34

1 Answers1

2

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);
Nandeep Mali
  • 4,456
  • 1
  • 25
  • 34
Arkellys
  • 5,562
  • 2
  • 16
  • 40
  • Thank you for taking the time to draft up this reply! Your answer helped me dig deeper into this. I have updated my question. Looks like your first hypothesis was correct. If you can edit your answer to reflect that I will accept this. – Nandeep Mali Aug 26 '21 at 10:33
  • @NandeepMali Ahh! I'm glad you found a compiled version of your code to determine which of these two hypothesis was correct. I was really curious about this too. What kind of edit do you want me to do? Remove the second hypothesis? – Arkellys Aug 26 '21 at 17:44
  • 1
    I think a simple statement highlighting which hypothesis was correct. The 2nd one contains a useful example so it might be handy for someone else. – Nandeep Mali Aug 28 '21 at 08:16