How To Use the LESS CSS Preprocessor on an Ubuntu VPS

About LESS

---

LESS is a CSS pre-processor that lets you create stylesheets in a much more efficient and intelligent manner than using simple flat CSS. It provides a number of dynamic components that will make your code smaller, more reusable and more scalable. Its syntax is fairly easy to understand and rather adds on top of regular CSS than replaces it.

There are 2 main ways you can use LESS: server-side or client-side. The first one needs Node.js to compile to css, whereas for the second case you need to download a javascript file and include it on your page. This second way is not really recommended for production sites, but has a development oriented watch-mode that you should check out if you are interested.

In this tutorial, we will see how you can install LESS and get started using it on the server-side. For this, it assumes you are already running your own VPS with Ubuntu and a web server installed (if you want to see something in the browser). Additionally, you will have to install Node.js and NPM (Node Package Manager). If you don't have them already, follow the steps outlined in this tutorial to get set up.

Installation

---

So assuming you have Node.js and NPM all set up, we can run the following command to install LESS:

npm install -g less

Once installed on your VPS, you can use the command line to instruct LESS to compile less files to .css. To try it out, go to your web server's document root (defaults to /var/www in Apache) and create a .less file:

nano /var/www/test.less

Inside this file paste the following css declaration (note that LESS language is basically css with some great additions on top):

#box {
  color:red;
}

To have LESS compile this file to css and output the result in the terminal, run the following command:

lessc /var/www/test.less

You should see the results printed in your terminal window. To have this output written to a .css file (more of a common scenario), specify also a file destination:

lessc /var/www/test.less > /var/www/test.css

Now you'll have a new .css file containing the compiled css statements from the .less file.

If you want LESS to also minify the resulting css, add the following option to the command: -x

lessc /var/www/test.less > /var/www/test.css -x

This will create production ready minified css. For more information about the options you can pass to LESS commands, visit this page or run the lessc command without any parameters.

The LESS language

---

So why is LESS so great and should you give it a try instead of simple css? Below we will look at a couple of reasons why.

Variables:

With LESS, you can use variables in your css. For example:

@white: #fff;

#white-box {
  color: @white;
}

Will compile to:

#white-box {
  color: #fff;
}

So you can define stuff like colors once and then easily reuse them across your stylesheets.

Mixins:

Mixins are for reusing existing style declarations. Once you declare them, you can reuse them across your stylesheets.
For example, something like this:

.shape {
  size: 100%;
  padding: 20px;
}

.box {
  .shape;
  background-color: red;
}

Will compile to:

.box {
  size: 100%;
  padding: 20px;
  background-color: red;
}

So the first declaration is a mixin - in this case more like a complex variable - the value of which then we insert in another declaration (that of the .box element).

Nesting:

Another cool thing is that you can nest declarations. For instance:

.box {
  color: red;
  .box-inner {
    max-width: 80%
  }
}

Will compile to:

.box {
  color: red;
}
.box .box-inner {
    max-width: 80%
}

So instead of having repetitions in our code, we nest everything together logically.

Operations:

With LESS, you can easily perform operations on numbers and variable values. For instance:

@length: 10px + 20;

.box {
  width: @length / 2;
}

Will output the following css:

.box {
  width: 15px;
}

So LESS can transform units into numbers and perform calculations. This applies also to colors and you can do some really cool and dynamic stuff right in your stylesheets.

Functions:

LESS comes with some predefined functions that you can use to manipulate the aspect of HTML elements in your stylesheets. For instance:

.box {
  color: saturate(#398bce, 5%);
}

The saturate() function will perform a 5% saturation on the color property of the .box element. For more information about what functions you have available in LESS, you can visit this reference page.

Importing:

LESS allows you to structure your stylesheets and organise them logically. You can create multiple files that contain relevant code and then import them one in another. You can do this with the following statement:

@import "base";

This will include all the declarations you made in the base.less file that resides in the same folder as the file you are importing from. This way you will have available variables and mixins wherever you want. One thing to note is that if you donít specify a file extension, LESS will treat the imported file as a .less file automatically. If you want to import a simple .css file, you can specify the extension and will be treated accordingly. If any other extension is specified, it will be treated again as a .less file.

Conclusion

---

In this article, we’ve seen a bit the power of using LESS for better management and usage of your stylesheets. We’ve seen how to install and use it on the server-side and a glimpse of the language improvements it brings to regular css. You are encouraged to read more from the official LESS website and learn even more about all the things you can do with it.

Additionally, if you are interested, there are available GUI applications that help you work with LESS right on your computer. This includes also compiling the .less files to css. You can find cross platform compilers like Crunch or Mixture that work both on Windows and Mac but also ones for specific platforms. You can check them out here.

Alternatively, I also encourage you to check out Sass, another popular CSS preprocessor. There is a tutorial on DigitalOcean that can get you started with that.