CSS Stylus color functions, how unit-sensitivity works?

Question

I read in the documentation of Stylus CSS preprocessor language, that the color function are unit-sensitive. For example:

darken(color, amount)

Darken the given color by amount.This function is unit-sensitive, for example supporting percentages as shown below.

Here is a code example which goes with the above function:

darken(#D62828, 30)
// => #551010

darken(#D62828, 30%)
// => #961c1c

What I don't understand, is how the first example, which has the amount of 30, was calculated. What does the amount 30 represent as a unit.

Answer 1

Yeah, that's far from intuitive, but if you'd look into the source then you'll find out:

1. darken bif calls the adjust bif like this: adjust(color, 'lightness', - amount)

2. adjust bif have different behaviour for percents and other units:

   • When there is a unit like 30 it would change the color's lightness by reducing it by given amount from the color's lightness.
   • When there is a percent, then it would reduce its lightness by the given percent of the initial color's lightness.