Amaynut Amaynut - 5 months ago 22
CSS Question

CSS Stylus color functions, how unit-sensitivity works?

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

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.
Comments