As you probably already know, CSS is one of the main languages used to build websites. Whereas HTML is used to define the structure and content of a website, CSS tells a web browser how a website should be displayed, defining everything from font sizes to the layout of pages.

I’ve often thought that it would be great if CSS could include some of the functionality found in programming languages to lessen the amount of code required and speed up development. A couple of weeks ago i came across LESS, which does everything i had wished for and more.

LESS gives us variables, mixins, operations and functions, which i will go into a bit more detail about below.

PagePlay

We have loads of great designs available for use with PagePlay sites. When a customer signs up to PagePlay on either a Bronze or Silver setup package, we take one of these existing designs chosen by the customer and amend it to fit their needs. Using LESS we can make this process as simple as changing a few variables at the top of the stylesheet.

CSS3 browser specific properties

Until recently the proper CSS property for border-radius hasn’t been available (in Firefox at least), meaning if we wanted to do something like add rounded corners to an element we had to add both the webkit and mozilla browser specific alternatives (-moz-border-radius and -webkit-border-radius) instead of one simple property. Even now that this property is available, we still have to add three properties to ensure rounded corners are shown in older versions of the browser (where border-radius) doesn’t feature. Multiply this multiple times over a CSS file and we’ve got many many lines that we shouldn’t really need to write.

Using LESS we can use a Mixin to limit the amount of code we write. By setting up the following mixin…
and using in our LESS like the following…




Our CSS will appear like this…

Lessphp

Once you have created your LESS file, it needs to be compiled into regular old CSS. There’s a number of LESS compilers around that can do this job for you, but one that caught my eye was a PHP implementation. This allows us to upload .less files directly to the server and they will be automatically compiled into CSS when they are first used. A handy function is also provided that compiles LESS files and saves them as CSS files only when needs (when a change has been made to the LESS files).

So in our PHP implementation we just need a bit of LESS as a style.less file…

Two lines of PHP…

And the following style.css file is ready for us to use in the same directory…

Take a look at http://lesscss.org for more details of all the wonderful things that LESS can do.