Update: This post was written a while back. If you’re new to LESS I recommend using a compiler to turn LESS files to CSS. I’ve listed a couple of them in this post.
If you design websites you may have heard of interesting tools called CSS pre-processors. A couple of great ones are LESS and SASS. I helped Alexis, the creator of LESS with the design of the language and built the public site.
It’s a tool I wanted to use myself, and even though SASS already existed I didn’t feel like using a different syntax to CSS–I wanted something to augment CSS and make it more powerful, while still retaining the same look and feel. That’s exactly what LESS does. It extends CSS with things like variables, nested rules, mixins and operations to name a few. ~
Here’s an example of LESS code to give you an idea of what it does:
@brand-color: #3879BD;
.rounded(@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded(5px);
a {
color: @brand-color;
&:hover {
color: #000;
}
}
}
Three features in use there. First of all I’m specifying a variable at the top called @brand-color. I then re-use this color for a link. I make a class called .rounded which I then use for the #header div (the header will take on all the properties of the rounded class and use 5 pixels instead of 3). You can also see nested rules in use, which really help make the code more organized. Learn more about LESS over at the official site.
LESS was originally coded as a Ruby gem. No specific reason to use Ruby other than it’s a great language and the gem format is easy to use on *nix machines (Linux, OS X)–tools of choice for many web developers. You didn’t actually have to use Ruby or know any Ruby to use LESS to process your code, you just had to have it installed, but even so, this puts many people off who are not familiar with what Ruby gems are or how to use them. There’s now LESS implementations in other languages, including PHP and .NET.
Less.js
Very soon we’ll see the next evolution of LESS. The new change will be bigger than any previous implementation or update because LESS has now been re-implemented in JavaScript. What this means is you no longer need Ruby, ASP or PHP to use LESS, you just need a browser.
Less.js is a JavaScript implementation of LESS that’s run by your web browser. As any JavaScript, you include a link to the script in your HTML, and…that’s that. LESS is now going to process LESS code so instead of including a link to a CSS file, you’ll include a link directly to your LESS code. That’s right, no CSS pre-processing, LESS will handle it live.
Wouldn’t live processing lag? Not really. Two reasons for this. One: Less.js has been written from the ground up for great performance, so even browsers with poor JavaScript implementation should still run it very well (Less.js is about 40 times faster than the Ruby implementation–so suffice to say it’s a lot faster.). Two: On modern browsers that support HTML5, Less.js will cache the generated CSS on local storage, making subsequent page loads as fast as pure CSS.
There are other cool features built into Less.js. For example, there’s a “watch” feature available in development mode. This feature will refresh the CSS on your page whenever your .less file is saved with new changes. The best thing is, it won’t refresh the whole page, just the right bits of CSS, live.
I’ve been using Less.js on my latest redesign of Workable that I’ll deploy for production soon, and it’s been a fantastic experience because all of the above really does work.
Sneak preview
Alexis hasn’t officially released Less.js yet, but…the repository has been up on Github for a while and you’re free to grab the latest release and try it for yourself (and he’s given me permission to blog about it). I think you should, because Less.js really is a big deal. Here’s the repository.
Note that Less.js is actually a Node.js implementation as well as the client-side browser based one, so most of the files in the repository are irrelevant if you just want to use the browser one. What you need is either one of these (the min file is minified for smaller file size)
Try it now
That’s the Github repository, but there’s also a Google Code repository where you can get just the browser script. You can do something really simple and link to the file on Google’s server directly, so if you want to try out Less.js now include this in the head of your HTML code:
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>
Now, to use LESS code, include the .less file as you would your .css but provide a rel="stylesheet/less" property to tell the LESS compiler that it’s a LESS file. Include this above the JavaScript:
<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
Just make sure the href="/stylesheets/main.less" points to the location of you .less file, and you’re good to go. Code your LESS and and it should magically render in your browser as if it were CSS.
NOTE: Make sure to put the LESS include before the JavaScript. So putting it together should look like:
<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
It need not be said that Less.js development is ongoing and this is a very early release, which means you might just run into a bug or two. Having said this, my experience so far has been very, very positive, with no parsing errors at all. Also, if the compiler runs into any problems you’ll get an informative error message in your browser telling you where the problem in your code lies.
This is very exciting stuff, so if you’re looking for a way to get your large stylesheets under control and make the CSS design process more effective you should definitely give LESS a shot.
P.S. To use the live “watch” feature (which will auto-refresh the CSS whenever you save your LESS code), just drop this code into your template:
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
You may not even need the “development” line because the script should detect when you’re running on a local machine, but it didn’t do it in my particular case so I’m setting it manually. Another method to invoke watch is to append “#!watch” to the end of your URL.
P.S.S. Less.js browser script currently won’t work if you’re using Chrome and the path to your page starts with “file:///” due to a known Chrome issue.