Picture of Brian Love wearing black against a dark wall in Portland, OR.

Brian Love

Starting with LESS

It’s been on my list for awhile, and I was finally able to learn more about the LESS language. It’s a very simple approach to having dynamic stylesheets. It allows you to easily reuse styles, colors, width and height values, and more.

To get started, you should first read the basics over at lesscss.org. Next, you will need to install the LESS compiler on your Mac or PC. Then, you can start writing LESS. Finally, you will will compile your LESS code into a CSS file, which can then be included in your web site. For this article, I will be focusing on using LESS on my Mac with the Coda editor.

What is it and why bother?

Simply put, LESS is a dynamic stylesheet language, or a CSS preprocessor. The important aspect is that LESS is dynamic. Let’s get real basic. Remember when you first started creating web pages using static .html files? Then you realized there were languages like PHP that allow you to create web pages that are more dynamic, allowing you to pull content from various sources, such as databases or xml files. Just like PHP added the ability for you to create more dynamic web sites, so does LESS, in terms of your design rather than your content.

Why bother? Because it’s freakin’ cool! And, because it makes our jobs as web designers and developers much easier. If you have been writing “classic” CSS for years, this will open a new world of possibilities for you. Imagine having variables and mixins available to you in your CSS? Like I said, it’s freakin’ cool!

Installing LESS on your Mac

Let’s dive into getting started. I will be using a Mac, so the instructions will be geared towards the Mac. We are going to:

To get started, open up your terminal application via Applications > Utilities > Terminal. To install Homebrew, you will execute the following line of code:

$ ruby < (curl -fsSkL raw.github.com/mxcl/homebrew/go)

This will install Homebrew. Just follow along with the instructions in the setup. After completing the installation of homebrew, you want to first make sure you run:

$ brew doctor

This will ensure that you have everything configured for Homebrew to work. I received a couple of warnings, one of which indicated that there was not a c compiler: “You have no /usr/bin/cc”. To resolve this, I installed the command line tools from Xcode:

As a prerequisite, you will also need to install the git command line tools. I already had this installed, but you can install git using homebrew as well. Execute the “brew install” command. We will also install Node.js using the same command:

$ brew install git
$ brew installnode

After the installation of node, homebrew will inform you that you also need to install the node package manager (npm). To do so, execute the following:

$ curl https://npmjs.org/install.sh | sh

Next, we will set the NODE_PATH environment variable and install the less compiler:

$ export NODE_PATH="/usr/local/lib/node_modules/" $ npm install --global less

You can verify that your install of the LESS compiler worked by executing “lessc -v”, which should indicate which version of the LESS compiler you are running. I am running 1.3.0. I can now compile LESS into CSS using the lessc command line tool.

Compiling LESS on your Mac

Now that we have the lessc command line tool installed, we can execute a command to compile our LESS files into CSS. I am using a primary styles.less file, which includes all of the necessary CSS files in the proper order as I want. This will result in compiling all of my .less files into a single styles.css file. Here is a quick snippet of the top of my styles.less file:

@import 'normalize.less';
@import 'mixins.less';
@import 'base.less';

/*Large mobile devices (why not just use an iPhone? Silly kids.)*/
@media only screen and (min-width: 481px) {
  @import '481up.less';
}

/*Tablets*/
@media only screen and (min-width: 768px) {
  @import '768up.less';
}

/*Desktop*/
@media only screen and (min-width: 1030px) {
  @import '1030up.less';
}

To create my single styles.css file from the various .less files, I will run the following command:

$ lessc styles.less > ../css/styles.css

Using Coda with LESS

The last thing that I wanted to mention, is that there is a LESS plugin for the Coda 2 editor that enables you to compile all of your .less files into .css files with a simple click on the mouse. You will still need to install the lessc command line tool, as instructed above, in order for the plugin to work.

Final Thoughts

Simple put, if you are not using LESS or Sass, giddy up and get onboard. These are very cool languages that make CSS awesome again, not that CSS3 isn’t sweet enough. Also, you might be tempted to use the less.js file to compile your .less files into CSS at runtime. This is fine for development and staging purposes, but you should not use this method in production.