How LESS can make your life easier
I’ve started using LESS a few months ago on a Tribune News projects. LESS allows you to extend the way you write CSS, letting you use variables, nested selectors, operations and mixins. It sounds great — and it is great — but there are a few things that can make it work against you. These are some of my thoughts on LESS.
What is LESS?
LESS — Leaner CSS — is, in the authors’ own words, a “new version of CSS” (better yet, of writing CSS), that is then compiled into “traditional” CSS using the LESS compiler.
There are 4 main things you can do with LESS that you can’t with normal CSS:
1. Variables
You can define a variable, such as “@text-color”, and use it throughout your stylesheet. If the colour of your text changes, you only need to change it once in your CSS — where the variable is initially defined.
2. Nested selectors
With nested selectors, instead of doing this and repeating yourself:
.top-story h1 { font-size: 24px; }
.top-story h2 { font-size: 18px; }
.top-story {
h1 { font-size: 24px; }
h2 { font-size: 18px; }
}
3. Operations
You can add, subtract, divide and multiply using operations. Here’s a quick example:
@content: 468px;
.top-story
{
width: @content;
}
4. Mixins
Mixins work a lot like variables, but you can specify a whole class in one. For example:
.b-radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.box {
.b-radius;
}
This is not a “how to” guide
The official LESS documentation is very clear on how to install it. I have to admit I usually stop reading instructions whenever “Terminal” is mentioned (and I know more people do), but I guess most CSS authors will be OK with it — if not, ask for help to your nearest web dev (or email me and I’ll give you the phone number of one).
After it’s installed, you’ll have two files: the .less file — this is the file you’ll be working with — and the compiled .css file.
There’s also LESS app, that makes it easier to use LESS. And I suppose that some CMS and servers let you use LESS directly, but the point of this article is not to teach anyone how to install it — it’s to go through its good and bad points.
