Working Effectively with LESS: Tips and Tools

By . Filed in Web Design

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.

LESS Tips

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.

Sublime Text 2

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

Show Console

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

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Package Console

This Package Console will help us to install the highlight-package.

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.

Package Control: Install Package

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

Less Package

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

Package LESS successfully installed

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.

View - Syntax - LESS

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.

Notepad++

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.

View - User-Defined Dialogue

The following pop-up box below will appear. Click the Import… button and locate your downloaded .xml file. Then, restart the Notepad++.

Language Menu

Open your .less file and go to Language menu. You should now see LESS included. Select it to apply color highlighting on your LESS syntax.

.less file

More Resources

There are many other editors on the market. So, here we include some useful links for you if you do not use any of the above editors.

Adobe DreamWeaver

Undoubtedly, Dreamweaver has a huge user-base. It’s available for both Mac and Windows. So, if you use this editor, here is one of good source to install LESS highlight in Adobe DreamWeaver.

Coda

If you are using Mac you probably know Coda, this editor is one of the most popular among Mac users. And, here is how you can install LESS in 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.

WinLess

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.

Windows GUI for less.js

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

  • Automatically compile files when saved
  • Show message on successful compile

Settings

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 containing folder

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

Successful compile

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:

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

or

background: -moz-linear-gradient(top, #f0f9ff 0%, #a1dbff 100%); 
background: -webkit-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%); 
background: -o-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%); 
background: -ms-linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);
background: linear-gradient(top, #f0f9ff 0%,#a1dbff 100%);

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:

<head>
<title>LESS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a rel="external" href="#">Click Me</a>
</body>

Create a styles.less as our main LESS stylesheet, save it in the same folder with our HTML document and add the folder to WinLESS.

Import the elements.less we've downloaded before using this syntax:

@import "elements.less";

Now, we can use any Mixins provided from elements.less like .gradient, .rounded, and .bordered. I'm sure the Mixins name is quite self-explanatory.

Next, put the LESS rules below, in your stylesheet. And, save it once again

a {
	display: inline-block;
	padding: 10px 20px;
	color: #555;
	text-decoration: none;
	.bw-gradient(#eee, 240, 255);
	.rounded;
	.bordered;
	&:hover {
		.bw-gradient(#eee, 255, 240);
	}
}

Since our .less file has been added to WinLESS, it will automatically be compiled into .css. Now let's see the results.

Result

Well, it's not so bad isn't it, considering that this button was created with fewer lines than what was needed. And, here is the actual generated static CSS:

a {
  display: inline-block;
  padding: 10px 20px;
  color: #555;
  text-decoration: none;
  background: #eeeeee;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f0f0f0), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #f0f0f0 0%, #f0f0f0 100%);
  background: -moz-linear-gradient(center bottom, #f0f0f0 0%, #ffffff 100%);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border-top: solid 1px #eeeeee;
  border-left: solid 1px #eeeeee;
  border-right: solid 1px #eeeeee;
  border-bottom: solid 1px #eeeeee;
}
a:hover {
  background: #eeeeee;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #f0f0f0));
  background: -ms-linear-gradient(bottom, #ffffff 0%, #ffffff 100%);
  background: -moz-linear-gradient(center bottom, #ffffff 0%, #f0f0f0 100%);
}

In Summary

Here is a quick summary of what we have discussed in this post:

  • 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.

Author:

Thoriq has been dabbling in Web Design for 5 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.

Advertisement