question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Please add subtract_color(minuend, subtrahend) to allow porting code relying on color subtraction to sass-4 more easily

See original GitHub issue

When I try to compile this on sass-4 (dart-sass), I get an error:

.a {
  x: white - grey;
}
Error: Undefined operation "white - grey".
  x: white - grey;
     ^^^^^^^^^^^^
  - 2:6  root stylesheet

I found that to port my code, I had to write this, which is quite WET (see how many times I have to write grey) and tedious:

.a {
  x: adjust_color(white, $red: -(red(grey)), $green: -(green(grey)), $blue: -(blue(grey)));
}

May a subtract_color(minuend, subtrahend) be added which implements the sass-3 color minus color support to enable easier porting of sass-3 code to sass-4? I can always write one myself for my own code, but I think it should be core.

Thanks.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
nex3commented, Apr 11, 2018

We’re removing color arithmetic because it doesn’t mean anything in terms of actual colors as humans perceive them, and we want to encourage users to use the color functions that do have comprehensible semantics. Adding new functions to do the same thing would defeat that purpose. As far as migration goes, it’s pretty easy to write your own functions that do the same thing as arithmetic, as you’ve demonstrated.

6reactions
binkicommented, Apr 9, 2018

I think I would expect such functions to match the behavior provided by the following:

@function add_color($a, $b) {
  @return adjust_color($a, $red: red($b), $green: green($b), $blue: blue($b));
}
@function subtract_color($minuend, $subtrahend) {
  @return adjust_color($minuend, $red: -(red($subtrahend)), $green: -(green($subtrahend)), $blue: -(blue($subtrahend)));
}

@function multiply_color($a, $scalar) {
  @return rgba($scalar * red($a), $scalar * green($a), $scalar * blue($a), alpha($a));
}
@function divide_color($a, $scalar) {
  @return rgba(red($a) / $scalar, green($a) / $scalar, blue($a) / $scalar, alpha($a));
}

.a {
  x: subtract_color(white, grey);
  y: add_color(green, red);
  z: multiply_color(grey, 2);
  w: divide_color(green, 2);
}
.b {
  x: subtract_color(rgba(255, 254, 253, .4), grey);
  y: add_color(rgba(0, 254, 253, .4), red);
  z: multiply_color(rgba(255, 254, 253, .4), 2);
  w: divide_color(rgba(255, 254, 253, .4), 2);
}

output:

.a {
  x: #7f7f7f;
  y: #ff8000;
  z: white;
  w: #004000;
}

.b {
  x: rgba(127, 126, 125, 0.4);
  y: rgba(255, 254, 253, 0.4);
  z: rgba(255, 255, 255, 0.4);
  w: rgba(128, 127, 127, 0.4);
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Physics Tutorial: Color Subtraction
To answer this question, the process of color subtraction will be applied once more. In this situation, we begin with only blue and...
Read more >
Color Addition and Subtraction - YouTube
Your browser can't play this video. Learn more. Switch camera.
Read more >
Color Subtraction - YouTube
The interaction between light and the surface upon which it lands is discussed, with the interest of explaining why objects appear the color...
Read more >
OpenGL ES 2.0 colour subtraction - Stack Overflow
If I understand correctly, you need a value within 0 to 1 inclusive-float to subtract from an already existing colour component's value.
Read more >
How Do Primary Colors Combine to Make New Colors?
As more colors of paint are mixed in, more colors are subtracted, and the mixture ... In this science fair project, you will...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found