CSS pre-processors are fantastic! That’s the simple way of putting it.
CSS Pre-processors are there to make writing CSS more productive, dynamic and organised. They are an evolution of a workflow that so many are used to and some may feel they don’t want to switch (myself being one of them) but after using a CSS pre-processor you may change you mind as did I. Some may be happy to continue writing CSS the traditional way but here are some great reasons to use them and why.
What’s out there?
There are big names in the CSS pre-processor world, LESS, Sass & Compass and Stylus. For this post I will be covering the two popular choices LESS and Sass. CSS pre-processors provide generally the same functionality such as nested rules, variables, mixins, selector inheritance to name a few examples.
LESS
LESS is my personal choice when it comes to choosing between the two. Why? I started with LESS and after a while it becomes hard to switch when you are set in your ways. LESS also has an extension like Compass is to Sass. Its called LESS Elements and provides general mixing for consolidating cross-browser prefixes into single, concise declarations. There are other LESS extensions such as Preboot which also extends LESS with pre-written mixing and variables.
Compiling LESS
LESS provides a JavaScript file for on-the-fly compiling of your LESS code which is perfectly fine for development but I wouldn’t suggest you use it for production as it’s unnecessary. There are a few great pieces of software out there for compiling LESS such as:
For windows I personally loved using Prepos. I am a Mac user now and for Mac suggest Less.app which is free or for those of you who don’t mind paying, Codekit which provides other functionality as well.
Sass
Sass is one of the biggest names in the CSS pre-processor world. It has an extension called Compass which is also used frequently with Sass as it provides a massive amount of pre-written mixing to use. Compass makes Sass even easier and nicer to use.
Whichever you choose you will get the extended functionality and features provided by a pre-processor so either way it all depends on personal preference.
Compiling Sass
In the same way as LESS there are programs out there to help with compiling your Sass code such as:
You can compile Sass from the command line but I personally don’t. I personally find it easier to use the GUI’s provided with the applications above.
What can you do with a pre-processor?
Here are a few examples of how you can use a CSS pre-processor. I am going to be using LESS for these examples, to get the same effect with Sass it will be slightly different in some places but the concept still remains the same.
Nested rules
Nested rules allow you to truly organise your CSS. This isn’t an excuse to nest everything, but use it where it will be useful. An example of this would be a sidebar and the specific styles for that sidebar.
/* Nested rules */
#sidebar-1 {
background: rgb(22, 22, 64);
border-radius: 10px;
padding: 10px;
margin: 0;
p {
color: rgb(236, 236, 240);
}
a {
background: rgb(160, 202, 230);
display: block;
color: rgb(22, 22, 64);
&:hover {
background: rgb(144, 182, 207);
}
}
}
/* When compiled it looks like this... */
#sidebar-1 {
background: rgb(22, 22, 64);
border-radius: 10px;
padding: 10px;
margin: 0;
}
#sidebar-1 p {
color: rgb(236, 236, 240);
}
#sidebar-1 a {
background: rgb(160, 202, 230);
display: block;
color: rgb(22, 22, 64);
}
#sidebar-1 a:hover {
background: rgb(144, 182, 207);
}Mixins
Mixins allow you to create re-usable chunks of code easily. This example you may have come across before is border radius and its prefixes. Instead of writing those prefixes every time you want to use border radius, just write it once.
/* Mixins */
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
/* Use it like this */
.box {
.border-radius(10px);
}Variables
We use variables in programming to store a value, it’s exactly the same with LESS. If you have a large colour palate and can’t remember what HEX or RGB colour goes where, just make a variable you cane easily remember.
/* Variables */
@color-1: rgb(22, 22, 64);
// You can then use this like so...
h1 {
color: @color-1;
}Operators and functions
These are fantastic! Simple answer. If you want a lighter version of a colour used a background for a link, you can just use the lighter function.
/* Lighten - this below will lighten the given colour by 10% */
a {
color: lighten(rgb(22, 22, 64), 10%);
}
/* Darken - this below will darken the given colour by 10% */
a {
color: darken(rgb(22, 22, 64), 10%);
}
/* You can also saturate and desaturate */
a {
color: saturate(rgb(22, 22, 64), 10%);
}
a {
color: desaturate(rgb(22, 22, 64), 10%);
}These are just a few of the functions that can be used of which you can get a more detailed explanation and list of the available functions at the LESS website.
What next?
This is just an introduction to CSS pre-processors so now all that is left to do is go and use one. The examples above can all be used together to create so much more with so much less. You may find you don’t like it or your finding it difficult to understand but persevere because the benefits are greater than the learning curve.
