The Absolute Beginners Guide to LESS

CSS is a simple language. It allows us to style properties of HTML elements using selectors. This makes it easy for beginners to get started with CSS.

However, as the size of your web projects grow, you end up repeating much of your CSS code. If you face this issue, then it’s time to use a CSS preprocessor.

In this tutorial, we’re going to explain what a CSS preprocessor is. We’ll also introduce you to one of the most popular CSS preprocessors: LESS.

What is a CSS Preprocessor?

CSS Preprocessors do not replace CSS. In fact, preprocessors simply give us extra functionality such as variables, mixins, operations and functions with which we can streamline how we create and manage CSS files.

Preprocessors allow us to define properties once and then reuse them throughout our project in a much more dynamic way that plain CSS can’t.

What is LESS?

LESS is a relatively new preprocessor, being only about 4 years old. It’s often compared to SASS, a slightly older preprocessor.

Both LESS and SASS have their roots in the Ruby programming language but are now used much more widely. LESS is now based on Javascript.

People use LESS in order to create a pre-determined set of colors for their site. They can define a particular style once and then re-use it wherever needed.

Using LESS

To take advantage of what LESS has to offer, we first have to save our CSS code in a file with the “.less” extension. Using LESS is very straight forward. It runs both on the web server or on the client-side.

The simplest way to get started would be on the client-side. Link your .less files to your web page the same way you link your CSS file but with rel set to “stylesheet/less” followed by the less.js file that can be download from www.lesscss.org. Here’s how that code would look:

<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script>

This method only works in a modern browser and is great only when developing locally. For production, the recommend approach is to pre-compile using node on the web server or various 3rd party tools locally.

Some of the 3rd party software you can use locally are:

• WinLess
• Simpless
• Crunch
• and many others…

LESS Syntax: Variables

One of the things that is often repeated in a CSS file is color. The same colors are repeated across CSS files for different elements, headers, links, etc.

#header { background-color: #CCCCCC } .aside { background-color: #CCCCCC; color: #000000; .sidebar a { border-bottom: 1px solid #CCCCCC; }

In LESS, we can simply declare a variable to save a color like:

@grey: #CCCCCC;

And then re-use this like:

#header { background-color: @grey; } .aside { background-color: @grey; color: #000000; } .sidebar a { border-bottom: 1px solid @grey; }

We can also use variables to save other properties such as width, height, font size, font family and other values that you plan to reuse throughout your stylesheet.

LESS Syntax: Mixins

Variables are great for reusing single values such as colour and font size. In LESS, with mixins we can use entire properties from one ruleset to another. Mixins can be used for border styling, setting font size, font family, etc.

.border_top_bottom { border-top: dotted 1px #000; border-bottom: solid 2px #000; }

In the above code, we have defined top and border styles inside a .border_top_bottom class. Now, whenever we want to add this styling to other elements, we can now reuse them like:

#header { color: #000000; .border_top_bottom; } .content a { color: #000000; .border_top_bottom; }

The above code will output this:

#header { color: #000000; border-top: dotted 1px #000000; border-bottom: solid 2px #000000; } .content a { color: #000000; border-top: dotted 1px #000000; border-bottom: solid 2px #000000; }

To add more flexibility, mixins also allow us to pass variables (also referred to here as parameters). For example:

.border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; }

In the above example, the paramenter we have created is radius. We have also given it a default value of 5px which is optional. Now we want to add this to say a .button class in this way:

.button { .border-radius(6px); }

If we remove 6px from the above example, the border-radius applied is the default one specified in our .border-radius class, which is 5px.

LESS Syntax: Nesting

One of the things common in CSS is long selectors, which we often have to write to style child elements such as:

nav { } nav li { } nav li a { } nav li a:hover { } nav li a.active { } nav li a.visited { }

And if you have multiple sub levels in your drop down menu, then this becomes way more complicated. In LESS, this can be written as:

nav { li { a { &:hover { } &:active { } &:visited { } } } }

The “&” symbol is used in front of pseudo classes in our nested structure. The above structure is much easier to understand and shows the hierarchy exactly as it is.

LESS Syntax: Operations

LESS also allows us to perform operations such as addition, subtraction, multiplication and division to number, color and variable in the style sheet.

Let’s say that we have declared a variable padding which is applied to all our H1 elements, but we want to add extra padding to our homepage title. We can do it like this:

@padding: 5px; h1 { padding: @padding; } h1.page-title { padding: (@padding * 2); }

This code will multiple the default padding value by 2 and will give the page title heading a padding value of 10px. Operations should be performed within parentheses, however they can also work without parentheses.

LESS Syntax: Scope

Scope in LESS is similar to scope in other programming languages. Variables and mixins are first looked up locally, and if they aren’t found, the compiler will look in the parent scope and so on.

@var: red; #page { @var: white; #header { color: @var; // outputs white } } #footer { color: @var; // outputs red }

Wrap up

This article does not cover everything that LESS has to offer. The aim is to explain how using LESS can help us make our CSS more dynamic. Remember that CSS Preprocessors allow us to create and manage CSS more efficiently.

Having a good understanding of CSS would allow you to use LESS and be more productive, so if you are a new web designer then learning and mastering CSS is important before you learn LESS.