Lighten & Darken with LESS
May 25 · 2015
I had a LESS file full of color variables and it looked something like this:
@color-blue: #0070b9
@color-blue-dark: #003b7f
@color-blue-light: #0079c2
@color-blue-extra-light: #0080cb
@color-blue-xx-light: #9ee0ff
etc.
My need for additional color tints grew and so did the length of the variable names. Say hi to @color-blue-very-very-light! There was a another problem: if I wanted to change the hue of @color-blue I would have to change each and every tint.
An unsustainable situation. Today I found out that LESS (and Sass for that matter) has a lighten and a darken function. That means that I can have a master color (e.g. @color-blue) and use lighten and darken to create the tints: