WARNING: If you like copy-pasting, find-replacing, scrolling in giant messy CSS files, not reusing your code, writing hundreds of times the same thing, you should definitely LEAVE THIS PAGE RIGHT NOW. I’m serious, if you start reading this tutorial, you might like it and could dangerously become way more productive. At the end of this read, you might even think crazy things like “pure CSS sucks” ! You’ve been warned…

EDIT: I strongly recommend reading or watching my talk about CSS Preprocessors and consider using Sass instead of Less.

If you’re a web developer or designer you probably faced this kind of situation before:
“I wonder if we should use a different theme on our website, can we try a blue one instead of the current green?”

2 possible answers:

• A pure CSS developer: “Damn… Can you come back in 15 minutes?”
• A Less CSS developer: “Sure! Wait just a second… Done, look!”

If you’re using pure CSS, even when respecting best practices, chances are that your answer will be the first one. Indeed, CSS is really far from being perfect. Hasn’t it come to your mind that some essential features are missing from a such widely used language? For instance, very basic things like variables.

Declaring a simple variable to store a color at the top of your stylesheet and being able to change the entire theme of your site by only changing this single variable would be pretty neat right? And what about all these repetitions each time you use CSS3 properties with vendor prefixes? Wouldn’t it be useful to have to declare that just once?

Well guess what, we’re gonna fix that! This article will demonstrate the power of Less, an enrichment of CSS using JavaScript. It adds tons of awesome features missing from CSS to make your web developer life so much easier. Trust me, once you’ve tried it, it changes the way you code your stylesheets forever and you’ll never come back to pure CSS!

Continue reading “DON’T READ this Less CSS tutorial (highly addictive)” »