Getting jolly well lost in Wess color transforms...


  • Dadman with a boy
  • Posts: 16,079
Getting jolly well lost in Wess color transforms...
« on November 6th, 2013, 01:49 PM »
So, in case you didn't know, the Wess engine for CSS pre-processing allows you to apply several functions to color values.

For instance, darker(#fff, 10%) would return something like #eee (not exactly that value, but you get the point.)

Yesterday, I was looking into taking rgb values without an alpha channel, and apply a channel to them. To do that, I did alpha(rgb(99,99,99), .1), hoping for it to return rgba(99,99,99, .1)... Of course, it didn't do that. It return rgb(99,99,99), because the '.1' was understood was Wess as "add .1 (10%) of the alpha channel's currently value to the variable". Given that the current value was 1 (100%), the final value would be just the same, as it's clamped to 1.

So, I looked into my code a bit, and yes, I never documented it, and yes I always meant to, and no I don't have much time for documenting my stuff these days.
It's still a pretty powerful system, but what you need to know is: you can never 'force' a value with it, you can only influence an existing value. For instance, to return rgba(99,99,99, .1), I should instead do alpha(rgb(99,99,99), -.9) or alpha(rgb(99,99,99), -90%).
That makes sense. But what when you don't know the original value, and you just want to set a default alpha value..?

I figured out that thing: if you add a sign before the number, it should be a relative value to apply, and with no sign (- or +), it should be an absolute value.
I then proceeded to rewrite my code, and am done now, but I'm at a loss when it comes to 'understanding' it all, and most importantly, helping others understanding it.

I'm going to try, but please tell me if there's a better way to do this all, or if I forgot anything.

alpha(rgba(9,9,9, .5),  33%) => rgba(9,9,9,  .33) (forced, so: 33% = 0.33)
alpha(rgba(9,9,9, .5), +33%) => rgba(9,9,9, .665) (0.5 + (0.5*33%) = 0.665)
alpha(rgba(9,9,9, .5), -33%) => rgba(9,9,9, .335) (0.5 - (0.5*33%) = 0.335

alpha(rgba(9,9,9, .5),  .33) => rgba(9,9,9, .33) (forced, so: .33)
alpha(rgba(9,9,9, .5), +.33) => rgba(9,9,9, .83) (0.5 + 0.33 = 0.83)
alpha(rgba(9,9,9, .5), -.33) => rgba(9,9,9, .17) (0.5 - 0.33 = 0.17)

So, basically, you can do any operations you like this way, but of course I'm concerned about the fact that percentage values aren't the same as floating point values when using signs. Is it too complicated? Or does it, on the contrary, make sense..?
Or maybe, even better, I just need to point people to this topic, so that it can make sense to them...? :P