LESS - The Dynamic Stylesheet language

February 20, 2013

I don’t know if you guys have used it, or even have heard about it, but it’s something definitely worth considering. I’ve been using it for quite some time now and it really does make your life with CSS easier. You can read up on it here and download it.

It has a full set of features, but here are the ones I use pretty consistently:

  • Variables: great for helping maintain the color scheme without remember the hex codes for everything.
  • Mixins: great for using repetitious code. For example, border-radius and each browser extension of it (-moz, -webkit, -o, -ms).
  • Nesting (bolded for emphasis): just nest everything like you are used to in other languages.

Because LESS is a javascript library to do this stuff, the page might load before the styles are fully rendered. To help avoid this, and to keep your css in a manner that does not require javascript, you have the option to use lessphp. This will compile the code and deliver the css file and I’ve never had an issue of the page loading before the styles were done. I also prefer to compress the file so it’s much less load on the server and user.

Here’s a code snippet of how I use lessphp. Put this in a file called styles.php (for example):

<?php
if(extension_loaded('zlib')) ob_start('ob_gzhandler');
header("Content-type: text/css");
include "css/lessc.inc.php";
$less = new lessc;
echo $less-&gt;compileFile("css/styles.less");
if(extension_loaded('zlib')) ob_end_flush();
?>

However you chose to use it, I’m sure it’ll make your life easier.

Happy Styling

Comments are closed