Matt Lambert

Check out my blog, or sign up to receive articles by email.

Getting Started with LESS

By admin on August 19th, 2014 in LESS

You may have looked at a CSS Preprocessor before but turned away because it looked complicated or like a ton of new syntax you needed to learn. Although that can be true, you can get yourself setup and taking advantage of some of the basic aspects of something like LESS pretty easily.

The LESS and SASS debate is never ending but at the end of the day, just pick one and get started. Personally, I went with LESS because at the time it was all that Bootstrap supported and if you haven’t noticed I’m a Bootstrap enthusiast. I also find LESS is alot easier to start using right away with less.js.

Using less.js

less.js is a simple script you need to include in the head of your file that will automatically compile your LESS code into vanilla CSS. It’s totally suitable for a development environment but you shouldn’t use it for production.

First head over to lesscss.org and download less.js. Once you have the zip file, expand it and drop the javascript file into your project directory, likely in your /js folder. Now open up one of your HTML files and insert the following line in the

<script src="path-to/less.js" type="text/javascript"></script>

Your page is now setup to compile LESS files. The next thing you need to do is insert a link to LESS file in the head of your file. Make sure you include this before less.js. You link a LESS file the same way you would a regular CSS file with one exception. Make sure you include rel="stylesheet/less" in the link tag.

<link rel="stylesheet/less" href="path-to/styles.less">

Now that you’ve included less.js and linked in a LESS stylesheet, you’re page template is configured to start using LESS. Let’s move onto some of the simple things you can start doing right away to take advantage of the preprocessor.

Variables

Perhaps the easiest and most useful thing you can do in LESS is use variables. To declare a variable in less you need to first start with the @ symbol followed by a keyword. Let’s setup a few colour variables as an example:

@blue
@red
@black
@white

Defining the variable name is just the first step, you need to give each variable a value. Let’s insert some hex colour values.

@blue: #00f;
@red: #c00;
@black: #000;
@white: #fff;

Now that we have these variables setup, we can use them anywhere in our stylesheet. Make sure you include the variables at the top of your stylesheet before any of your selectors, classes or IDs. It’s actually a good idea to copy all your variables into their own stylesheet and name it something like lib.less which is short for library. Use the import rule at the top of your stylesheet to bring the variables in.

@import "path-to/lib.less";

Let’s get back to actually using the variables. Let’s setup the basic body and a styles using variables.

body {
  background: @white;
  color: @black;
}

a {
  color: @blue;
}

a:hover {
  color: @red;
}

I’ve setup a page with a white background and black text, the links will be blue and on hover they will change to red. Pretty basic stuff and easy to configure. You might be asking yourself, why would I want to do this? Let’s say you have a 2,000 line stylesheet and you’ve used your red hex value 50 times. Let’s also say you decide you want to change the shade of red you’re using to something darker. In a regular CSS stylesheet you would have to go and change all 50 instances of the colour red. In LESS all you need to do is change the variable value to your new hex colour and it will inherit to all the instances you have setup through the use of your variable. That’s a pretty awesome time saver if you ask me. Controlling colours with variables is a pretty basic technique. Let’s take a look at something a little more advanced.

Controlling Margin & Padding with Variables

Let’s use a variable for our margin and padding values. There are a couple of reasons that this is a good idea. One, the same as colours, if we decide to change the value we only have to change it one place. Two, it’s much easier to achieve consistent values throughout your stylesheet if you’re using a variable. How many times have you completed a really long stylesheet then looked back through and seen margin and padding values all over the map? If you are concerned with things like vertical rhythm this can be very helpful. Let’s first declare our variables.

@margin: 10px;
@padding: 10px;

I’ll use a simple value like 10px which is easy to multiple, divide, subtract or add to. More on this in a little bit but for now let’s apply these variables to our body selector.

body {
  background: @white;
  color: @black;
  margin: @margin;
  padding: @padding;
}

I’ve now added 10px of margin and padding to the body of my page. However, now I’m thinking I’d like to have 20px of padding. Should I go back and change the variable value? No, let’s use a LESS operator to do it on the fly. An operator is a add, subtract, multiply, or divide calculation on the base variable value.

body {
  background: @white;
  color: @black;
  margin: @margin;
  padding: (@padding + 10);
}

Simply place the value in brackets and do a simple math formula to add the extra ten pixels. You can also use multiplication here:

padding: (@padding * 2);

I’d actually recommend the second option because it’s easier to keep track of operations like that then adding or subtracting pixel values. You aren’t limited to whole numbers either, you could do a decimal like:

padding: (@padding * 1.5);

Borders

Another good place to use variables is on the border property. You can string together a few variable values like you can string together CSS values. First setup a few border variables.

@border-size: 1px;
@border-type: solid;
@border-color: @black;

Notice that I used a variable as the value for another variable. This is totally fine and actually recommended. Doing this makes your stylesheet more modular and easier to customize. If you change your @black it will then inherit through all of your CSS properties and components. Now apply these variables on a selector.

.box {
  border: @border-size @border-type @border-color;
}

This is a much better way to setup your borders because you don’t have to worry about inconsistent values in your stylesheet. I think I’ll stop there for today. This should give you a decent intro to using LESS and start to show you the value in using a preprocessor. Yes you have to learn a little new syntax and rethink how you structure your stylesheets but it will save you a ton of time down the road and allow maintenance to be much easier.

If you’re interested in learning more about crafting themes for Bootstrap using LESS, you should check out my eBook Mastering Bootstrap. I dedicate a whole chapter there to using LESS in Bootstrap theming.

Like what you read? Check out my store over at Creative Market to support the blog and help keep the lights on. Files starting from only $2.