Taking your first step in any language can be a daunting task. And starting with LESS is no different. The main difficulty with LESS is getting your development environment set up to work with it correctly. In this post I am going to try and guide you through getting up and running with this brilliant CSS preprocessor.
Git is a version control system. If you are not using it already then you are really missing out. It allows you to store every change in your code and collaborate with others on sites such as GitHub. It also has a handy feature called submodules. A submodule is a git project nested inside your git project. We will use this to download less.js (the in browser version of LESS) and keep it up to date.
If you are on Ubuntu, you can install git the usual easy way:
sudo apt-get install git. Job done. For all other operating systems (such as Mac) you are going to want to use the installer. It can be found on the git website. You may need to run a script that comes with that install to make the git commands available in your terminal.
You should always install the latest version of node from source. The Ubuntu apt-get version is way behind. Node releases a lot of updates very regularly. Some include huge changes to the underlying system. The first step is to download the latest version of node’s source. At this time that is v0.6.11, although it may have already changed. So hit the node website and copy the download link to the latest version. Use that in place of the one below if it is different.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
If you just can’t get this to work, then try the installers on the node site. I do not recommend them, they may cause trouble in the long run. But they should work okay as a quick fix.
npm into your terminal. If you get an error then here is how to install it.
That line is taken from the NPM website. It should install NPM onto your system. Once done you are going to want to install a package. We will be installing
less via NPM. Less provides a program called
lessc which allows you to compile your LESS to CSS on the command line.
1 2 3 4 5 6 7 8 9 10
You may want to install
n to keep your node install up to date. Here is an example of downloading and using n.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Okay, so now you have everything set up we can get cracking. It may seem like a lot to install, but it is so worth it. The above programs will make working with other things easier too. They are all great tools to have ready.
If you have a git project set up already, then great. If not you will want to set one up. If you do not know how then this should help. Once you have your repo set up and a terminal in that directory, we can download less.js as a submodule. Please edit the path at the end of this command to point at your desired download directory.
1 2 3 4 5 6
Alternatively you can visit the GitHub repository for less.js and download the project in a zip. I would recommend using git but it is up to you. Now less.js’s repo will be in
</head>) after any included styles.
You will have to check inside the dist folder for a later version. If there is one then load that instead.
Writing some basic LESS
This tutorial is about using, compiling and understanding the concept of LESS, not the syntax it’s self. So I will show you some of the basics, but for the rest you will want to use the documentationn. LESS allows you to do a lot that you wish you could do in CSS, these include variables, functions / mixins and selector nesting. Here are a few examples of using these.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Including your stylesheet
You do not include LESS in the normal way, you have to use a special
rel attribute. So place the following line above your include of less.js and change the path of the file to match your layout.
rel attribute of this link tag is
stylesheet/less. This allows less.js to identify, load and compile your LESS. If you open up FireBug / some form of console you will be able to see debug information produced by less.js. Such as how long it took to compile.
Compiling in the terminal
You should only compile LESS in the browser during the development stage. When you are done and you are uploading to your FTP server for example you should compile your LESS to CSS and load that instead. To compile your LESS you can use the following line. Remember to point to the correct files!
This will compile your LESS with
lessc and then minify it with
cleancss. Now all we have to do is swap to the CSS version on our production server. So we can remove this.
And replace it with this.
Wow, this post ended up a lot longer than I expected. I hope you have enjoyed it. Please feel free to ask questions in the comments below.