Posted on May 24, 2013 by
Spread the word...

Previously, in one of my front-end development projects based on the Bootstrap framework, I encountered and made use of an awesome tool called LESS.
If you don’t know what what LESS is, it could be said that LESS is the same for CSS as what PHP is for HTML. Or in another expression, what PHP is for HTML in terms of generating HTML document (as in general, PHP is much more powerful language). Anyway the idea is really simple, LESS gives you an array of tools to produce CSS code dynamically, and makes sharing your stylesheets across many projects simpler.
After several uses of the tool, I found it difficult to switch back to another project which doesn’t use LESS, which is proof that pre-compiling (rather than hard-coding) is more appropriate way of creating a stylesheet to generate an effective Web design. That’s where origins of this blog post come from.

I hope you will find the following list of LESS resources handy. Please bear in mind that I am using LESS in connection with Bootstrap – so apologies if some links below are too bootstrap-oriented :)

Syntax explanation / Tutorials:

  1. http://lesscss.org/
    A great LESS syntax explanation with examples of input / output code. On this site you can also find the latest version of ‘less.js’ which is a front-end LESS compiler allowing you for example, to preview changes you are making to your LESS stylesheet live (very handy on development area).
  2. http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
    A nice tutorial published on the Smashing Magazine website explaining the language syntax and comparing it SASS.

LESS compilers:

  1. http://wearekiss.com/simpless
    Probably the only compiler which is supported by all three major platforms (Mac, Windows, Linux) moreover, the most powerful one; harnessing features like output CSS minification, on-the-fly compilation and automatic LESS updater.
  2. http://leafo.net/lessphp/
    A great compiler written in PHP. Plugins for popular frameworks and CMS systems are also obtainable.
  3. http://winless.org/online-less-compiler
    An online LESS compiler (and a handy standalone Windows compiler)
  4. http://less2css.org/
    Another online tool.

IDE plugins:

  1. http://www.normalesup.org/~simonet/soft/ow/eclipse-less.fr.html
    A plugin for Eclipse providing syntax highlighting, content assist, code compilation etc.
  2. http://plugins.netbeans.org/plugin/32782/lesscss-module
    NetBeans equivalent.
  3. http://www.fastinfo.com.au/dreamever-syntax-highlight-for-less-and-sass/
    A breif but infomative tutorial on how to enable less syntax highlighting in Adobe Dreamweaver.

Decompilers:

  1. http://css2less.cc/
    If you want to translate your current CSS code into a LESS equivalent, this little tool may prove to be very handy.

Mixins collections:

  1. http://lesselements.com/
    A helpful library of mixins.
  2. http://lesshat.com/
    Another useful collection of mixins.

Framework based on or utilized LESS:

  1. http://twitter.github.io/bootstrap/
    My favourite front-end framework utilizes LESS so you can easily customize default styles or pick up which parts of the framework you want to use.
  2. http://lessframework.com/
    Popular grid system built on LESS.

Other tools:

  1. http://getkickstrap.com/
    Front-end framework working via LESS that makes managing your Bootstrap library much easier and a lot more!
  2. https://github.com/scottjehl/Respond
    A  JavaScript library that enables media queries in old browsers (which are commonly used in responsive web design using LESS).

Please leave a comment below, if you find or know anything else to add to the above list!

Leave a Comment

Your email address will not be made public or shared. Inappropriate and irrelevant comments will be removed.