The Joomla! Community Magazine™

Tools To Do LESS

Written by | Wednesday, 01 May 2013 00:00 | Published in 2013 May
As a follow up post to David Hurley’s round up of working less, I mean, Work LESS in Joomla, I’ve put together a list of tools and programs that you can use to make working and coding your websites up with LESS far easier, especially if you come from a traditional world of basic CSS and now trying to get your head around how LESS works. This article goes through a bunch of useless, I mean useful, LESS tools that our interns here at PB Web Development have found in their time working and learning LESS and Joomla. 

Code Highlighters

First tool to work with is a code highlighter of some sort. The most popular tool out there for coding up website by far is Dreamweaver. A relic from the past and a programmers dred but for a newbie or a person coming from a design background it is quite nice to move towards before maturing to a more robust code editor such as Eclipse, NetBeans or PHPStorm.

Dreamweaver has a great built-in CSS code highlighter and suggestive CSS code completion, but when working with LESS it doesn’t work right out of the box.

What you will need is an added extension for Dreamweaver that will allow for the extra LESS code highlighting and this is available from the Adobe extensions website.

Another very popular visual code editor for Macs is Coda 2 and there is a beautiful LESS code syntax highlighter module that you can add on to the editor.

Now the next tool that you will need is a LESS compiler. A old browser might not be able to recognise the LESS files and won’t be able to render a lot of your LESS functions, mixins and so forth.

LESS compilers

Once you have all your LESS code, you won’t be able to test it until it is compiled into CSS. Some Joomla template frameworks have a LESS compiler built into them making this a little easier to test dynamically on the fly but when testing on a local machine or in a development environment it might be a little harder.

This is where a stand alone LESS compiler can help with the process.

CrunchApp

CrunchApp is a quick and easy to use app that compiles your LESS files and gives you syntax line errors wherever you may have made a mistake. There is nothing like trying to find that extra closing bracket that is breaking your LESS code.

SimpleLess

SimpleLess tool works on both Windows and Mac and allows for simple drag and drop compiling of your LESS files. It will watch for changes to the files and recompile them on the fly so you can keep testing your site as you code it. It reduces that one extra step and makes life a little easier.

Dreamweaver LESS compiler

The Dreamweaver LESS compiler isn’t the best and doesn’t always work. We personally haven’t had the best luck with it ourselves, but if others have we’d love to hear from your experiences with it.

WinLess

If you’re a Windows developer then WinLESS is a great tool to automatically compile your working LESS file directory straight to CSS. It will watch and monitor for changes to LESS files and will compile. 

Online Win Compiler

For occasions when you need to quickly test and validate your LESS code on the go, try using this online LESS compiler from WinLess. It is a quick and easy to use compiler that highlights your errors as you go.

Full Highlighter and Compiler Suites

Now on the other extreme, if you’re a very well versed coder and are not afraid of working in a code specific application, give PHPStorm a go. There are LESS highlighters, compilers and all sorts of goodies all ready to go for PHPStorm. It does however cost money for the editor.

On the open source front there are other alternatives which are also very popular and perform in the same way with highlighters and compilers.

NetBeans, a very popular editor has a LESS addon that you can install to your editor.

Eclipse, another very popular code editor has a LESS highlighting module and compiler as well.

So whatever your flavour of code editor there is something out there for you to use and code up with.

Still Learning About Less?

Well that's okay, and a good move too. With a lot of template developers all moving in the same direction, learning LESS to help speed up your development and implementation processes is essential for modern website building.

The best place to start learning the basic concepts and ideas is at: http://lesscss.org/

Read 17493 times
Tagged under Developers, English
Peter Bui

Peter Bui

Host of the Joomla Beat Podcast - Podcast about designing, developing, marketing and managing your Joomla website. Also runs PB Web Development. Follow Peter Bui on  Google+

Follow @JoomlaBeat