search

maxmx / bootstrap-stylus

Port of Bootstrap to Stylus
MIT License
585 stars 113 forks source link

fixed color calculation issue with lighten/darken build-in function in stylus #100

Closed wh1100717 closed 9 years ago

wh1100717 commented 9 years ago

In Stylus:

hsl(0deg, 0%, 17%)          // #2b2b2b
lighten(#2b2b2b, 10)        // #454545
hsl(0deg, 0%, 27%)          // #454545
lighten(#2b2b2b, 10%)       // #404040
hsl(0deg, 0%, 25%)          // #404040

In Stylus, if the input type is numeric, lighten/darken use lightness += amount to get the new lightness(HSL color model), else if the input type is percent, lighten/darken use lightness += (1 - lightness) * percent to get the new lightness.

In Less:

hsl(0deg, 0%, 17%)          // #2b2b2b
lighten(#2b2b2b, 10%)       // #454545
hsl(0deg, 0%, 27%)          // $454545

It is just simply using lightness += amount to get the new lightness.

The color function is so weird in Less/SASS... So CSS needs a hero <_<

However~~ We could use lighten(#2b2b2b, 10) in Stylus to get the same color calculation result in LESS.

kane-c commented 9 years ago

This is great. Thanks!