Introducing Less as a solution

First created in 2009 by Alexis Sellier, Less is a dynamic style sheet language originally written to use Ruby; this was soon deprecated in favor of the significant increase in speed gained by rebasing the library in JavaScript. It is designed to be used by both the client and the server—the latter with help from Node.js, which we will cover in Chapter 3, Getting Started with Less.

Less was built as a superset of CSS, which means that it contains more advanced tools than traditional CSS. This allows us to write less code while still compiling it to valid CSS. The key to this lies in how we can use Less to produce better organized, more readable code. To see this in practice, let's take a look at a quick example of what we mean.

Imagine that you've written the following sample of CSS code—it's a perfectly valid CSS, even though it won't actually produce any useable results:

header { 
  margin-bottom: 25px;
}

header nav { 
  height: 25px;
}

header nav a { 
  color: #151b54;
}

You might have noticed though that we've had to repeat ourselves a little, which is not ideal, but a necessary evil when writing such styles. The code is readable in our example, but if we had developed this to any degree, the repetitive nature of the selectors (such as header nav div.first div.thumb .img-wrapper img) could make it harder to follow the code.

One of the core concepts of Less is to use the DRY principle when writing code—we can take advantage of its nested metalanguage syntax to reduce the code by nesting our statements. If we take the previous block of code and reform it using Less, it will look as follows:

header { 
  margin-bottom: 25px; 
  nav {
    height: 25px;
    a { color: #151b54; }
  }
}

Here we compile to the CSS we've just seen.

Notice how we managed to reduce the amount of code we had to write while making the code easier to read, by grouping styles and adopting a more natural flow. Nested metalanguages are hierarchy based, where we can group related declarations together and reorder them in some form of hierarchy that abstracts each level while including the higher level. Less will naturally group these related declarations together, which is a great benefit if a CSS style sheet is edited by multiple individuals.

Note

If you would like to learn more about nested metalanguages, you may want to browse to http://en.wikipedia.org/wiki/Metalanguage#Nested_metalanguage. Note that it's a somewhat dry reference (pun intended!).

To prove that this does indeed compile to valid CSS, you can see the results of compiling the previous Less code in Crunch!. Crunch! is a CSS editor and compiler for Less, which we will cover in more detail in Chapter 2, Building a Less Development Toolkit. You can code in Crunch! as shown in the following screenshot:

Don't worry if nesting code doesn't mean a great now—we will cover nesting in more detail in Chapter 4, Working with Variables, Mixins, and Functions. This is just one of the many functions in Less that will help revolutionize your CSS development. Let's take this a step further by delving into some of the reasons why you should use Less, in more detail.