Making more out of cascading style sheets with {less}.app

{less}.app makes editing and maintaining CSS incredibly easy

Everyone who has ever seriously wrestled with Cascading Style Sheets (CSS), the technology that controls modern Web page layout, knows how effective it is and how clunky it can be.

This clunkiness is obvious when you try to make small modifications such as change a color that is used in more than one place in your stylesheets. You have to pick through thickets of code undergrowth and find all the entries and change them making sure you don't make any typos and, if you do make a mistake, tracking down the problem can be nightmareish.

If you'd like to improve your CSS so it's more easily edited and more maintainable you need to check out a free utility called {less}.app. How easy? The {Less}.app Web site explains "The only thing easier is making fun of Internet Explorer."

Actually the {less}.app Web site is pretty amusing and explains: "{Less} extends CSS with variables, nested rules, operators and more. If you're still building websites without it, you're an idiot." It also includes quotes such as ""Look, I'm sorry your iPhone doesn't work in your left hand. But for the love of God, will you stop quoting my employees on your website?-- Steve Jobs" and "I'm dating someone else now. He wrote a flashlight app. -- Ex Girlfriend." But I digress ...

{less}.app is a [* graphical front end written by Bryan Jones for] the {less} stylesheet language [* which was] developed by Alexis Sellier, and acts, in effect, as a pre-processor (the language is [* now] maintained and extended by the LESS core team).

{less} (the language) replaces stylesheets' .css files with .less files so instead of: 

<link rel="stylesheet/less" type="text/css" href="styles.css" />

... you now reference your stylesheets as:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

The {less} files are converted, on the fly, into CSS specifications using the less.js script:

<script type="text/javascript"src="less.js" ></script>

... and this can be done client- or server-side (the latter requires node.js).

So, what does a {less} stylesheet specification look like? Here variables are used:

@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
#header { color: @light-blue; }

Which compiles to:

#header { color: #6c94be; }

I won't get into all of the details of the {less} language (you can find a good primer on the {less} site and another on the Design Shack blog) but it really isn't hard and makes engineering Web page stylesheets far easier and much, much more flexible.

So, what does {less}.app do? It does what less.js does but wrapped up in an OS X application that outputs .css files compiled from .less files. This allows a designer create and update a Web site's style sheets remotely and not rely on client-side JavaScript to compile the .less files when a page is rendered in a browser or on-the-fly when processed server-side (both methods have the potential of not working under all sorts of conditions and both impose a processing overhead).

The current version of the {less} app is 2.8 and that will be the last because Sellier ihas a new set of tools called CodeKit that includes {Less} and which I'll cover in a forthcoming post. Until then, grab a copy of {less}.app and have at it ... you have only your father's CSS to lose.

Code your comments below or to gearhead@gibbs.com then follow me on TwitterApp.net, and Facebook.

[* 12/23/13 Corrections]

Join the Network World communities on Facebook and LinkedIn to comment on topics that are top of mind.
Related:
Must read: Hidden Cause of Slow Internet and how to fix it
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.