CSS Preprocessing – Getting Started With LESS
You may have heard of css preprocessors such as SASS and LESS. These preprocessors bring some high level language concepts to CSS. Many of the features I imagine will make it’s way into the next CSS specification. I will avoid the topic of which preprocessor is better, instead I will focus on LESS. Not for any particular reason; other then it is what I have more experience with.
An easy way to setup an environment for building less files is to add the lessc plugin to SublimeText. If you have never heard of Sublime, it is similar to Notepad++. I personally use Sublime and feel it is the best text editor around, and I highly recommend it. To get started you must add package control to sublime. You can visit https://packagecontrol.io/installation for instructions to install it. The script you use will depend on the version of sublime text you have. Next you will have to Install nodejs. Nodejs contains a package manager to install less. Visit http://nodejs.org/ to download the latest copy. Once it is installed open the command line and type “npm install -g less”. You may need to navigate to the directory if npm isn’t set as an environment variable. Now in sublime navigate to Tools > Command Palette or Ctlr+Shift+P. Type “Install Package” into the prompt. Another prompt will appear, here you can search for a package you wish to install. In this case we will install “lessc”.
Congratulations you can now compile less to css from sublime. Just be sure you have selected lessc as the build system. To do this you can navigate to Tools > Build System > lessc. If you want to compile the less file, a handy shortcut is Ctrl + B to build.
Join me in the next blog post as I explore LESS language features.
