A few months back I was looking at some of the great work being done with responsive designs. Specifically Andy Clarke’s 320 and Up ,the Bones theme for WordPress and Twitter’s Bootstrap. All of those projects had recently switched over to using pre-processors such as LESS and SASS. I wasn’t too keen on getting into pre-processors thinking they were a pain to install and use. After looking at the LESS homepage and seeing things like variables and simple easy to use functions, I was sold on the idea. I bought a license for CodeKit and I’ve never looked back!
Now they both have a learning curve and I had a good look at both. In the end I chose to stick with LESS as the set-up is a no brainer and its simple enough for me to use! I don’t need a ton of fancy powerful functions that SASS provides.
In part 1 I’ll cover my two favourite things about using LESS: variables and color functions.
One thing I had been doing lately was to create classes for my theme colours and I would apply the additional classes as needed. With LESS you can create variables and then even use some of the colour functions to derive your colour palette.
So I used to write this:
.yellow {color: #f1f188;}
.l-grey {background: #f2f2f2;}
And with LESS:
@yellow: #f1f188; @l-grey: #f2f2f2;
Then in the actual .less file I can simply write something like this:
#module {
background: @l-grey;
color: @yellow;
}
Now is that is big deal? Well yes it is! You see before I had to add the class in the HTML or I had to write in the colour code in each css block. With LESS I create my variables, use them in the .less file and the pre-processor will substitute them for me. That way I just write the colour code in one spot.
Now to derive your colour palette with a lighter and darker colour and to also add say a hover state variation.
@m-grey: darken(@l-grey, 10%); //darken by 10% light grey @d-grey: darken(@m-grey, 10%); //darken by 10% mid grey
Now for a hover state colour you could use the fadeout which makes the colour *more* transparent
#menu-button:hover {
background: fadeout(@l-grey, 15%);
}
If nothing else, I’d suggest switching to LESS to take advantage of variables and the colour functions. Its a lot easier to just use a colour variable than to have to use classes.
In part 2 I’ll go over some of the other powerful features such as mixins and how to leverage the reusable code to make your CSS consistent and a lot simpler when handling CSS3 features like box-shadow and rounded corners while keeping up with all the browser’s vendor prefixes.
