HTML & CSS - - By Ivaylo Gerchev

A Comprehensive Introduction to LESS

If you’re reading this, you’ll already know that CSS is an easy to learn, and use, stylesheet language, which makes our websites shine. With the new CSS3 features being introduced, the possibilities are even greater. In this article I will cover the basics of LESS. Next Tuesday, we take a deep dive into it, covering Mixins, functions and even more!

All that sounds great, but this story has one weakness. CSS is static. And this means we repeat code over and over in our stylesheets, thus making the DRY (Don’t Repeat Yourself) principle only a dream. Fortunately, LESS can fix that. According to lesscss.org, LESS is a dynamic stylesheet language. What makes LESS dynamic, is that it extends CSS with variables, mixins, operations, and functions, forcing CSS to behave more like a programming language. But a key feature, is that it also preserves the original syntax used in CSS-with a few exceptions.

Technically speaking, LESS is a CSS preprocessor. In simple terms, CSS preprocessing is a method of extending the feature set of CSS by first writing the stylesheets in a new, extended language, then compiling the code to pure CSS so that its readable by browsers. LESS is one of three popular CSS preprocessors-the other two are Sass and Stylus.

I’ve chosen LESS because its designed to be as close to CSS as possible, so the syntax is almost identical to your current CSS, meaning you can use it right away with your existing code. All you need you learn is a new way of using the same language.

LESS can be run on the client or server side (with Node.js). For this tutorial, we’ll use LESS on the client side as its easier to get started. So, what are we waiting for? Let’s get started!

3, 2, 1… Getting Started

Using the JavaScript compiler is extremely easy. Simply include the script in your HTML code—it will process LESS as the page loads. We can then include our LESS file just as we would a standard stylesheet. Here’s the code to put between the <head> tags of your mark up:

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

The stylesheet link goes above the script to ensure it is available for the preprocessor. Notice that the typical rel="stylesheet" has become rel="stylesheet/less". Also, make sure that the href value points to the location of your .less file.

If you wish, you can reference the less.js script directly from the Google Code server. With this method, you don’t even have to download the script to use it.

<script src="http://lesscss.googlecode.com/files/less-1.2.2.min.js"></script>

As you can see, we declared a stylesheet with a rel attribute set to stylesheet/less and created a file called styles.less. All our LESS and CSS code will go in this file now. We also declared the LESS JavaScript file that will compile our LESS code into CSS. This JavaScript file will perform some AJAX calls to read your LESS files, so you need to use a web server. If you don’t have one, just download WAMP (Windows), MAMP (Mac), or LAMP (Linux), depending on your operating system, and you’re ready to go.

The second script activates the ‘Watch’ mode in LESS, which is a client-side feature available in development mode. This will refresh the CSS on your page whenever your .less file is saved with new changes. The best thing is that it won’t refresh the whole page—just the right bits of CSS. It’s optional, but I think it’s too good not to use.

If you open the style.less file in your favorite editor, you’ll notice that since you’re editing a .less file, you don’t get any syntax highlighting by default. To fix this, just find your editor’s preferences where you can choose which files should be associated with CSS highlighting. LESS and CSS syntaxes are very close. Even if a little different, it should work fine.

Importing

You can import .less files, and all the variables and mixins inside them will be made available to the main file. The .less extension is optional:

@import "typography.less";
@import "typography";

If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:

@import "typography.css";

Before you skip this step away, I want to tell you that importing can be very powerful. At the end of your development phase, all .less files will be compiled and minified in one pure .css file, ready for production. So, you don’t need to worry about how many server requests your page will make, and whether this will slow down the page load. I think you will agree that maintaining one long .css file is far more difficult than several, separated, short files. So, it’s a good idea to split your main file into several specific files for colors, typography, grid, reset, etc. This will help you to structure your code in a more modular way.

Commenting

Commenting makes your code more readable. You can use comments in your .less files in the same way you do in regular CSS, but you have to bear in mind the following:

Multiline comments are preserved in LESS:

/* Hello, sir! This will be shown in your compiled file */
.class {color: white}

Single-line comments are “silent”, they don’t show up in the compiled CSS output:

// What's up,  dude? Don't worry, this won't show up in your compiled file
.class {color: white}

Variables or Constants?

LESS gives you ability to use variables just like you would in other programming languages. This makes it extremely easy to set global styles that can be changed in a single location, rather than sorting through your code to find every instance of that style.

Variables are declared and used with the @ symbol. You give them a name and a value, and then you can refer to the name of the variable anywhere in your .less file:

@name: value;              // syntax
@color: red;               // example
background-color: @color;  // usage
background-color: red;     // output

LESS also allows you to define variables with a variable name like this:

@mainColor: red;
@bgColor: 'mainColor';
background-color: @@bgColor; // background-color: red;

Before moving to more complex examples, you need to understand that "variables" in LESS are actually constants, which means they can only be defined once, and their values cannot be changed once set.

Don’t you think that as human beings it is far more natural for us to use colors with their real names rather than HEX or RGB values? Yeah, man! Me too, buddy, me too. Fortunately, this can be done easily with LESS. Let’s see what I mean:

//Define Color Palette
@dimGray: #696969;
@gold: #FFD700;
@greenYellow: #ADFF2F;
@deepSkyBlue: #00BFFF;


//Define Color Scheme
@backgroundColor: @dimGray;
@primaryColor: @gold;
@secondaryColor: @deepSkyBlue;


//Now you can use it like this:
section {
   background-color: @backgroundColor;
   color: @primaryColor;
}


section ul li {
   color: @secondaryColor;
}

Any time we want to use these colors in our design, we use the same CSS we always do, but insert the variable name instead of the color code. If you want to go deeper, you can create a separate file with color variables (colors.less) and just import it to your main .less file. This way, you don’t need to define colors for every new project. Just import and use.

Variable declarations will not appear in the output. They can hold any CSS property value, and can be declared in the outermost scope of the file, or anywhere else a CSS property may appear. Scope in LESS is very similar to that of most programming languages. You could use variables with the same name in various places. Variables and mixins are first searched for locally, and if they aren’t found, the compiler will move up the hierarchy until it finds them:

@color: red;
header {
  @color: white;
  color: @color; // white
}
footer  {
  color: @color; // red
}

You may have noticed that in all examples above, I’m using Hungarian notation – lowercase for the first word, then uppercase for the first letter of the following words – for my variables. It’s just my personal preference, it helps me to differentiate LESS from pure CSS. You could also use the CSS-style naming convention with dashes-between-lowercase-words, if you want to. It’s totally up to you.

We know how to set up our variables so it’s time to make some more advanced decisions.

And Next Time…

Stay tuned for part two in this series, where I will introduce you to the more advanced parts of LESS – Mixins and more!

Sponsors