Working Effectively with LESS: Tips and Tools

In our previous tutorial, we have learned how to use LESS in practical way by utilizing applications like ChrunchApp to compile the code. This time we will walk through some handy tips that will be able to boost our performance and productivity when compiling LESS syntax. We are going to set up our desktop/working environment by enabling syntax highlighting for our current editor, using automatic compiler tools and utilizing preset Mixins, then synchronize them all together.

Well, if you’re ready, let’s get started.

Disclaimer: The tips explained below are derived from my day to day experiences as a web designer. So, before we walk through it further, I want to outline that the tips might suit some designers and not others; just like any other tip you find on the Web. Nonetheless, I hope you can reap something useful from the following tips.

1. Code Highlighter

As we mentioned before, we have introduced you to ChrunchApp. However, this app might not be every web designer’s preference; because each designer has their own working environment, including the code editor of their choice.

Rather than install another code editor, you can actually still use your current one and enable the syntax highlighting in it. So, in this post, I will share some tips to add LESS code highlighting into 2 famous text editors: Sublime Text 2 and Notepad++.

Sublime Text 2

This editor is currently my preferred choice to help me compose codes. This app is available for Windows, Linux and OSX, so whatever your OS is, you will still be able to follow this tip.

Now, let’s download it from its official website and try this editor. Then, read the following instructions to enable LESS color highlighting in it.

Note: Please make sure you have read the license before downloading, as the free version is only intended for evaluation.

Install Package Console

First, open your Sublime Text 2, and display the Console from this menu View > Show Console

Then, copy and paste the following command line into the Console, then hit Enter to install the package control from wBond.net:

Installing LESS-highlighting Package

Restart the Sublime Text 2 and show Command Palette from this menu Tools > Command Palette. Wait until the package list has all loaded. Then, type Install Package to search and load package repositories.

Then, search for the LESS package from the repository list and hit Enter.

Wait a minute for Sublime Text 2 to download and install the package until the following notification appears on the status bar.

Go to the menu View > Syntax, you should see LESS on the list. It means that the Sublime Text 2 is supporting .less and your LESS syntax should also have proper color highlighting now.

Notepad++

Notepad++ is a Free, Open Source code editor, and has many useful plugins to extend its functionality. It is also widely used by many web designers/developers particularly those who work with the Windows operating system. So, I decide to also include the tip to add LESS text highlighting for it.

Install LESS-highlight in Notepad++

Enabling LESS color highlight in Notepad++ is quite easy.

First download LESS package for Notepad++ from this link (userDefineLang_LESS.xml). Then, Go to View > User-Defined Dialogue.

Coda

Geany

It is one of the more popular code editors among Linux users. Some computers in my office that run on Linux also use Geany. So, if you use it as well, you can include LESS highlight by following this instruction at SuperUser.com

2. LESS Compiler

Unlike the ChrunchApp that has a built-in LESS compiler, the other editors will not have it by default. Although there are some ways to include it, but it is rather technical for general users. So the best solution I’ve got is to do the compiling using the following tools: WinLESS or LESS.app. WinLESS is a compiler designed for Windows, while the LESS.app is built for OSX.

These tools can convert our LESS code into a static CSS automatically as we save the file and report directly if there is an error in the code. Well, let me show you how handful this tool is:

First, I would like to download WinLESS and install it.

Click the Add folder button and locate the directory where you put your .less files (I assume you already have created at least one). Once you add one; WinLESS will scan and find all .less files and show you on the list.

Go to menu File > Setting, and make sure these options are checked;

Automatically compile files when saved

Show message on successful compile

We can also set the output folder, in case we want to save it elsewhere. But, in this example we will leave this option as it is; which means the output file will be saved in the same directory as the .less file.

Open your .less file from the added directory, make a few changes and Save it.

The WinLESS will notify you when the file has been successfully compiled into .css or if there is an error in the codes. This way you can check the .css output directly, rather than having to wait for the codes to complete to compile it.

If you are using Mac, you can use LESS.app that has same functinality as WinLESS.

Preset Mixins

In current modern web design practices, we will use CSS3 properties like Gradient, Shadow or Border Radius that look like this:

In our previous tutorial we have made some Mixins to simplify this syntax. Fortunately, some people in the web design community are really generous enough to spare their time to compile these useful Mixins, so that we don’t need to compile it ourselves from scratch.

And, one of my favorite is Less Elements that contains many useful CSS3 preset rules. Thus, we now write fewer lines of code from tedious vendor prefixes.

All right, now, let’s see how all these tips above can really help.

Putting Them All Together

In this example I’m going to create a simple link button. First I would like to create a new HTML document and put the following mark-up:

In Summary

By enabling syntax highlight in our current editor, we don’t need to install an additional editor only for composing LESS syntax; this can save you some spaces/memory on your disk.

We also no longer need to download and link the LESS.js Library into our HTML head section as we did in our last tutorial. This way, our HTML document remains clean and neat.

Using compiler tools like WinLESS and LESS.app can generate the static CSS output instantly. So, If there is something wrong with the syntax, we can examine it right away.

Preset Mixins like LESS Elements is our best friend. It can really save our time when compiling tedious CSS3 property.

We have come to the last section of our tips. I hope you will enjoy and find them helpful for your current or future web projects. Thanks for reading the tips. If you have any comment please do not hesitate to post it in the comment box below.