Jul 31

One thing about Less.js

If you're looking to familiarize yourself with CSS pre-processors but don't want to add additional complexity to your stack then maybe this one feature of Less.js is what you've looking for.

I don't use Less.js on any projects, but I have used it to create prototypes just to familiarize myself with Less.js while I was researching both Sass and Less.js.

Node.js isn't in my current development stack, so server side pre-processing of my .less files isn't an option (Node.js is required to pre-process your .less files before deployment). Therefore, I leveraged my favorite feature of Less.js, client side processing, which is actually pretty awesome for one main reason — you don't have to interrupt your current development workflow with any pre-deploy processing steps.

This addition of a pre-processing step in your workflow isn't a huge deal to many but for those not looking to add additional requirements to their stack (i.e. Node.js for Less.js or Ruby if you're using Sass) then this is any easy way to start playing around with this popular CSS extension.

So, Less.js processes your `.less` files client side, supporting IE 6+, Webkit, and Firefox, leaving it to the browser to handle the processing. You may love that idea, or you may not. To see what I'm talking about visit the Less.js project site lesscss.org and make sure to view source.

<link rel="stylesheet/less" type="text/css" href="less/main.less">
<script src="less.js" type="text/javascript"></script>

You'll notice a reference to `main.less` using a link tag with a `rel` attribute with the value 'stylesheet/less'. This is then processed by `less.js` on the client side generating valid CSS. That's it. That's the implementation. Pretty darn cool, no?

So if you're not comfortable with any of the server side pre-processing requirements, try using Less.js client-side to familiarize yourself with the features of these CSS pre-processors (mixing, variables, functions, etc).