Less is more

LESS is wonderful and magical at the same time. Much like Steven Gerrards freekicks back in the days.

Basically it makes it much easier to handle large stylesheets by giving you the possibilities to create variables, use nesting, functions and operations. You write your LESS “code” (it’s almost like code), and either a IDE or less.js compiles it to CSS for you.

Pre-compile: Use IDE like Crunch to create the CSS file for you. Upload the CSS file.
Runtime-compile: Upload the LESS file. Include less.js after your LESS stylesheet.

Let’s go through some of the functionality LESS gives you.

First of all, variables.

@primarycolor: #FFF;

@secondarycolor_1: #5E412F

@secondarycolor_2: #78C0A8;

@secondarycolor_3: #F0A830;

At the top of your LESS stylesheet you can create your variables. For example your color palette (as above). Then you can use these variables through your stylesheet. This makes it all much more manageable.

body {
background-color: @primarycolor;
}

a.link {
color: @secondarycolor_2;
}

And don’t forget nesting

You’re used to writing your stylesheets like this:

.container {
width: 400px;
height: 400px;
}

.container a {
text-decoration: none;
}

.container p {
color: red;
}

In LESS you can simply do:

.container {
width:400px;
height:400px;
a {
text-decoration:none;
}
p {
color:red;
}
}

If you’re not using LESS already, you should have a look at it today. It might take some time to get used to, but when you’re there – you’re gonna tell yourself “Oh yeah!” in the shower.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s