An Introduction to LESS CSS

An Introduction to LESS CSS

By Tyler Bruffy
August 27, 2012
Development

Intro to CSS

CSS stands for Cascading Style Sheets, and they are what dictate the design and layout of a website. Without CSS, most pages would be pretty boring. Everything would be black text in a single column. Here is an example of some CSS code that gives links on the page a specific color:

a {
    color: #9acd68;
}

The complicated little number above is a hex value, and that’s how the browser knows what colors to use. As you can imagine, those hex values are pretty hard to remember.

LESS CSS

LESS CSS is a way for developers to write CSS code more efficiently. It aims to save developers time by helping them write less css and reuse repetitive code. When developing a website, snippets like color values get reused over and over again. Color values being as complicated as they are, it would be great to be able to call that color “Green” and refer to it that way throughout the site. Thanks to LESS, that’s possible.

LESS Variables

Compare the following two snippets of code:

a {
    color: #9acd68;
}

@green: #9acd68;

a {
    color: @green;
}

As you can see in the bottom example, we have created a LESS variable to store our color value. Then when we want to reference that value, we can just refer to the @green variable. This is a lot easier for developers than trying to remember that our specific shade of green has the value #9acd68. Any value can be stored in a variable, which makes them perfect for frequently used or hard to remember values. One of the greatest benefits is that if we ever need to change that value we only have to change it in one place, instead of searching for it throughout the whole site.

LESS Functions

Another benefit of LESS is the ability to use certain functions within your stylesheet. Functions can be as simple as basic math, or as complicated as darkening or lightening a color value. Using simple math in conjunction with variables can make site updates a breeze. Let’s say you have an overall site width of 960px, but you want to make your site wider. If you set your overall width as a variable, you can derive any other width on your site from that variable. For instance you can give your sidebar element a width of “@site-width / 3” to ensure that it will always take up 1/3 of the total site-width. Now making your site wider is as easy as changing one value. Let’s look at two more examples:

a {
    color: #9acd68;
}

a:visited {
    color: #9acd68;
}

@green: #9acd68;

a {
    color: @green;
}

a:visited {
    color: darken( @green, 10% );
}

Color functions can really help cut down on the different hex values you need to remember. In the above example, links that have been visited will have a slightly darker shade of green than links that have not been visited. As you can see in the top example, we have two hex values to remember. On the bottom, however, we are calling the darken function on the @green color, which will generate a color value 10% darker than our @green color. This is even more useful if we ever need to drastically change the colors on a site. If everything that was green needs to be purple now, we only have to change the value of our @green variable in one place.

LESS Mixins

Another way that LESS helps cut down on repetition is with mixins. Mixins let us reuse whole sections of code. A big part of web development is browser compatibility, because unfortunately not every browser treats our code the same. This means that a lot of times we will end up with code like this:

.rounded-corners {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

That code is telling different browsers how to round the corners on an element. If you have several elements on your site that use rounded corners it can be a pain to write all three css rules every time. With mixins, we don’t have to. We can actually just include our .rounded-corners class on different elements, like this:

#sidebar {
    .rounded-corners;
}

#footer {
    .rounded-corners;
}

Now both our sidebar and our footer will automatically add whatever style we put into the .rounded-corners class. But that’s easy, we could accomplish a similar effect by including the .rounded-corners class on the sidebar element in our HTML. So we can actually use some variables when we declare our mixins that will make this even more useful:

.rounded-corners(@border-radius) {
    -webkit-border-radius: @border-radius;
    -moz-border-radius: @border-radius;
    border-radius: @border-radius;
}

#sidebar {
    .rounded-corners(5px);
}

#footer {
    .rounded-corners(10px);
}

Now we can pass a different value every time we call our rounded-corner mixin. This allows us to reuse those three lines of browser-specific code very easily with different values all over the site.

Performance

Though LESS applies styles to a website, it is not actually CSS but rather uses a JavaScript library to interpret the stylesheet for the browser. This can definitely slow down page load times, but the good news is there are other ways to use your LESS stylesheet. When the stylesheet is still in development it is best to use the JavaScript library so that you can see your changes immediately. But when it’s time to launch the site, you can compile your LESS Stylesheet into regular CSS. This means you can have all the benefits of developing with LESS without losing any speed on page loads.

Jake Intel