Articles

eLessar

This week I discovered LESS, a Ruby gem allowing variables, mixins, nested rules and operations to be used in CSS. Variables are something I've wanted in CSS for years. Having to use search and replace tools to change a colour in a stylesheet is less than ideal – in fact it can be a nightmare if the colour is defined both as an RGB and hex value in different places.

LESS allows you to parse a .less file containing LESS's syntax and save it as .css file. This is incredibly handy and is well worth a look. Unfortunately, I'm not ready to install Ruby until I have time to learn it and would rather utilise a technology I'm familiar with. Currently I have barely enough time to learn one programming language per year. Last year was Boo, this year is Python, next year might be Ruby. So, in the mean time, enter eLessar.

eLessar is written in PHP and parses a CSS file when it is requested. It sends a correct last modified header to the browser so the generated CSS file can be cached. The syntax is a bit more restricted than LESS and only allows variables and mixins to be set, these being the main features I would use.

Download eLessar 0.1

CSS Syntax

Variables allow you to specify frequently used values in one place and use them throughout the stylesheet.

@font-serif: georgia, "times new roman", times, serif;

h1 {
	font: bold 150% @font-serif;
}
h2 {
	font: italic bold 120% @font-serif;
}

Mixins allow whole chunks of CSS to be re-used in multiple places.

%border: {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 2px solid #305E9D;
}

div {
	%border
}
pre {
	%border
}

Variables are parsed before mixins so the following is also possible:

@blue: #305E9D;
@grey: rgb(235,235,245);

%border: {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 2px solid @blue;
}

div {
	%border
	colour: @blue;
}
pre {
	%border
	background-color: @grey;
}

PHP Syntax

The PHP syntax couldn't be simpler:

$elessar = new Elessar('path/to/css/file.css');

echo $elessar->render();

License

eLessar is copyright © 2009 Stoo Goff and is available under a Creative Commons Licence. It is free to use for commercial and non-commercial use. If you have any issues or suggestions for this software, or improvements to make, please let me know.

Download eLessar 0.1