There have been some interesting developments recently in the field of CSS pre-processors. CSS pre-processors work around the very limited syntax of CSS by allowing you to create your stylesheets using a more powerful, expressive syntax which then gets turned into plain CSS for consumption by all the main browsers. A couple of ones that I’ve come across are SASS and LESS. LESS is the one I’ve felt most comfortable with because it’s simply an augmentation of the CSS which allows you to incrementally introduce its syntax into your stylesheets.
For example LESS supports variables:
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}
nested rules:
#header {
color: red;
a {
font-weight: bold;
}
}
…mixins, operations on colors and size, etc. Check out the lesscss.org homepage for more.
LESS was originally a Ruby gem, but now also has implementations on ASP.NET (dotlesscss.org) and PHP. LESS has now (inevitably) been re-implemented in JavaScript by Alexis Sellier (github.com/cloudhead/less.js). As well as supporting pre-processing *.less files into *.css via the command-line, it can also be actually run live, directly in your browser!
<link rel="stylesheet/less" href="stylesheets/main.less" type="text/css" />
<script src="script/less-1.0.38.min.js"></script>
I’m not sure I’m quite ready to take the plunge running it live, in-browser on sites just yet, although maybe I shouldn’t be according to Dmitry Fadeyev:
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.
Running on Windows
The command-line compiler lessc is targeted to *nix-based platforms and requires node.js which, the last time I checked, doesn’t run on Windows (UPDATE: it runs fine under Cygwin, there’s a nice simple standalone version here). But Windows has had the ability to run JavaScript directly since the 1990’s using Windows Script Host. So I took the latest distribution copy of less.js from GitHub at https://github.com/cloudhead/less.js/tree/master/dist/ and included it via a *.wsf file and stubbed/faked/implemented a few things like window, document and XMLHttpRequest that less.js assumes will be present (which are presumably provided by node.js?), and added a bit of command-line argument handling.
Download
Browse the code and download from GitHub: https://github.com/duncansmart/less.js-windows and feel free to fork it and send me pull requests!
Usage
To use it, invoke lessc.wsf via cscript.exe like so:
cscript //nologo lessc.wsf input.less [output.css] [-compress]
I’ve also added a less.cmd shim which will simplify it to just:
lessc input.less [output.css] [-compress]
If you don’t specify an output.css the result is written to standard output. The -compress option minifies the output. I’ll look into implementing the other command-line arguments supported by lessc in due course.
I’ve added a couple of test files, so you can see if it’s working like so:
C:codelessc-wsh>lessc test.less
/* Variables */
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
/* Mixins */
#header {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
...
Future
I may look into hooking this into Visual Studio’s T4 support so that the *.css files are generated as soon as you save the *.less files in Visual Studio. (UPDATE: See Phil Haack’s T4CSS that does this, instead using the .NET port of LESS. Thanks to David De Sloovere for pointing this out.)
Update
Mark Lagendijk has created a nice little Windows GUI for the script. Check it out at http://winless.org.
Duncan Smart's Blog 