{"id":14547,"date":"2012-08-02T21:01:17","date_gmt":"2012-08-02T13:01:17","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14547"},"modified":"2024-09-03T18:35:14","modified_gmt":"2024-09-03T10:35:14","slug":"less-tips-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/less-tips-tools\/","title":{"rendered":"Effective Tips and Tools for Working with LESS"},"content":{"rendered":"

In our previous tutorial on using LESS to design a navigation bar<\/a>, we explored the practical use of LESS<\/a> for code compiling. This time, we\u2019ll cover some tips to enhance your productivity when working with LESS. We\u2019ll set up your working environment with syntax highlighting, automatic compilers, and preset Mixins, and then sync everything together.<\/p>\n

If you\u2019re ready, let\u2019s get started.<\/p>\n

Disclaimer:<\/strong> These tips are based on my daily experiences as a web designer. They may suit some designers better than others, but I hope you find something useful among them.<\/p>\n

1. Code Highlighting<\/h2>\n

Below are tips for adding LESS highlighting to two popular editors: Sublime Text<\/strong> and Notepad++<\/strong>.<\/p>\n

Sublime Text<\/h3>\n

Sublime Text is my preferred editor, available for Windows, Linux, and macOS. No matter your OS, you can follow this tip.<\/p>\n

\"Sublime<\/figure>\n

First, download it from the official website and follow these instructions to enable LESS color highlighting.<\/p>\n

Note:<\/strong> Ensure you\u2019ve read the license before downloading, as the free version is for evaluation purposes only.<\/p>\n

Install Package Control<\/h3>\n

Open Sublime Text and access the Console via View > Show Console<\/strong>.<\/p>\n

\"Sublime<\/figure>\n

Copy and paste the following command into the Console, then press Enter<\/span> to install Package Control from wBond.net<\/a>:<\/p>\n

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'<\/code><\/pre>\n
\"Installing<\/figure>\n
Package Control allows us to install the highlight package.<\/p>\n
Installing LESS Highlighting Package<\/h3>\n
Restart Sublime Text and open the Command Palette via Tools > Command Palette<\/strong>. Wait for the package list to load, then type Install Package<\/strong> to search and load package repositories.<\/p>\n
\"Using<\/figure>\n
Search for the LESS package in the repository list and press Enter.<\/p>\n
\"LESS<\/figure>\n
Wait for the installation to complete, indicated by a notification on the status bar.<\/p>\n
\"LESS<\/figure>\n
Go to View > Syntax<\/strong> and check if LESS is listed. If so, your LESS syntax will now be properly highlighted.<\/p>\n
\"Syntax<\/figure>\n
Notepad++<\/h3>\n
Notepad++ is a free, open-source code editor<\/a> with many useful plugins. It\u2019s popular among Windows users and widely used by web designers and developers. Here\u2019s how to add LESS highlighting to Notepad++.<\/p>\n
\"Notepad++<\/figure>\n
Install LESS Highlighting in Notepad++<\/h3>\n
To enable LESS highlighting in Notepad++, first download the LESS package for Notepad++ from this link<\/a>. Then, go to View > User-Defined Dialogue<\/strong>.<\/p>\n
\"Accessing<\/figure>\n
In the pop-up box, click the Import\u2026<\/strong> button, locate the downloaded .xml<\/code> file, and restart Notepad++.<\/p>\n
\"Importing<\/figure>\n
Open your .less file and go to the Language menu. LESS should now be listed; select it to apply color highlighting to your LESS syntax.<\/p>\n
\"LESS<\/figure>\n
More Resources<\/h2>\n
There are many other editors available. Below are some useful resources if you use a different editor.<\/p>\n
Adobe Dreamweaver<\/h3>\n
Dreamweaver<\/a> has a large user base and is available for both Mac and Windows. If you use this editor, here\u2019s a resource<\/a> to install LESS highlighting in Adobe Dreamweaver.<\/p>\n
Coda<\/h3>\n
If you use a Mac, you\u2019re likely familiar with Coda<\/a>, a popular editor among Mac users. Here\u2019s how to install LESS in Coda<\/a>.<\/p>\n
Geany<\/h3>\n
Geany is a popular code editor among Linux users. If you use Geany, you can add LESS highlighting by following this guide<\/a> on SuperUser.com.<\/p>\n
2. LESS Compiler<\/h2>\n
Unlike CrunchApp, which has a built-in LESS compiler, other editors may not include one by default. Although it\u2019s possible to add a compiler, it can be technical for general users. The best solution is to use tools like WinLESS<\/strong> for Windows or LESS.app<\/strong> for macOS.<\/p>\n
These tools automatically convert your LESS code into static CSS as you save the file and immediately report any errors. Here\u2019s how these tools work:<\/p>\n
First, download and install WinLESS.<\/p>\n
\"WinLESS<\/figure>\n
Click the Add Folder button and select the directory where your .less<\/code> files are stored. WinLESS will scan the directory, find all .less<\/code> files, and list them.<\/p>\n
\"WinLESS<\/figure>\n
Go to File > Settings<\/strong> and ensure the following options are checked:<\/p>\n