Recently, someone showed me LESS, a dynamic stylesheet, and never having used any type of CSS framework, I decided to give it a try. To add it to your site it is as simple as adding the javascript file in your header, renaming your stylesheet with a .LESS file extension and changing the rel to rel="stylesheet/less".

There are more configuration options that can be found here: LESS Usage. In my case, my site is developed on Drupal and I used the Less Module which takes care of the configuration and gives you the development option to rebuild the LESS file every time a page is called.

Once enabled, you can begin writing less. Below is the beginning of my LESS stylesheet used on this site and shows a few of the ways it can be used.

For more examples refer to the LESS Docs.

Is it beneficial?

I see value in only configuring your default variables once. This is especially useful when you are working on a project where multiple developers are adding to the same CSS files (especially when not all developers are good at CSS.) This saves someone the time of having to go through all of the CSS at the end to correct colors, margins, padding, etc. Granted, this requires your designer to actually design consistently which is whole other story. Simply put, this makes it impossible for mavericks to come up with an excuse about why their links are colored differently then the rest of the site.

LESS also enables a good CSS coder to do many things such as call functions, use math, create silent comments, nest classes and functions, and many more things that will not only save them time, but make for some really nice CSS code.

Pros

• Less CSS code.
• Crushes CSS Mavericks
• Adds lots of value in variables and functions to your normally static stylesheet.

Cons

• Performance issues when multiple users are hitting the same site in development mode, and Drupal caching turned off.
• More code added to your already large CMS framework.
• Unconfirmed but noticed by me: The Drupal module does not load properly when left in development mode, requiring an uninstall and reinstall of the module. *This is my own fault for never turning caching on my site as I am always working on it.

Recommendation

I plan on using LESS for the foreseeable future and am also encouraging others to check it out. It solves those moments when you say, "...Man, I wish CSS had variables," which for me was every time I wrote CSS. My next goal is to use it on a larger project, which means I have to present my case in some logical form to the project manager. Hopefully this article will start me on that path, and I can start using this to make more money, quicker.