Jun 5

Use LESS to make CSS development suck less (part II)

After our intro post on LESS it’s time to look a little deeper into LESS features.
In this post we’ll see details on how LESS will make you forget plain old CSS by introducing the following concepts:

1. Variables
Variables allow you to set values like color, borders etc in a single place. You can then reuse the variables elsewhere in the stylesheet. Applying a change to the whole stylesheet can be as simple as changing one line of code!

Ex., we can apply a collection of colors across an entire website. Every color could be used for multiple class and be repeated in the whole stylesheet. If we want to change the color, we must use the “Find and replace.” in our editor. Variables start with an @ and are written with the following syntax: @variable-name: value;

With simple CSS:

With LESS:

This screen shows us practical color implementation. .textarea and a have the the @globalblue and #main, h1 and p have the@lightgray.


2. Mixins

For every browser the CSS3 property for example border-radius is different. We must find a different way to write -webkit- and -moz- vendor prefixes. We have to write at least three declarations just to explain it. Lame….. For Example:

If you use a lot of CSS3, you know first-hand how much this sort of repeated code sucks :/ LESS solves this problem. It allows us to  reuse whole classes just by calling  them in our rule set. This is the end of the boring repetition of border-radius. Just like variables, you have to declare a mixin before calling it, for example: .mixins-name;

Here we added border-radius:3px in #main and .textarea

But what if we want more control in the corners’ size? No problem! We can change variables inside the mixins to get a specific value or we can rewrite the original mixin to add the variable we want to manipulate:

Now we’ve replaced the values for a variable. To give mixins multiple values, you’ll just need to separate them with a comma. Then if we want our #main to have a border radius of 20 pixels instead of 3, we write this:

In this case we have border-radius:20px onlyin #main.

You can also reuse a whole class of CSS in the whole stylesheet, as well. Any ruleset that uses a class, id or element selector can be mixed inside any other ruleset. You just  need to include the first ruleset’s selector within the second ruleset. Here’s an example:

In the next example we draw a cute cloud. We create a general class .cloudstyle and we apply this class to the #cloud:before and #cloud:after. Check the screen:

With simple CSS:

You can also add parameters to mixins, making them behave more like functions. Let’s modify the above example so that the border radius and colour can be changed dynamically:

Here, using more functional style we change the colors in #cloud:before and #cloud:after and we set the different border-radius.

As you can see, we’ve added parameters to the .cloudstyle (@borderRadius and @borderColour). In this case, we use these values to give style to  the border radius and  colour inside the ruleset. Then, we use the mixin inside #cloud:before and #cloud:after to specify different values for the parameters.
Also, you can specify default values. For example:

On the third and final post about LESS, we will talk about some pretty exciting features like operations, nested rules, namespaces, accessors and as a bonus a full-features example demoing all the coolness of LESS!

Feel free to contact me for questions on my Twitter account  @Maria_Nas