Getting Started with Less

If you're a front-end developer who has yet to take the leap into using a preprocessor, this is the article for you. I'll take you from beginning to end on getting up and running with Less in no time.

Below you'll find examples, starters, and, most importantly, a super easy and professional way to compile your Less into CSS. Less has a ton of features, so I'll try and cover only the most important pieces to point you in the right direction. Some of things we'll cover:

A explanation of the easiest way to use Gulp to compile your Less to CSS on save, lint it for errors, combine it into one file, autoprefix it, and then minify it.

A ton of Less features and syntax

Less is More

Less is a CSS pre-processor with a CSS-like syntax. It looks identical to CSS, but has a ton of extra cool features that can speed development up like crazy. Below is a small example of what some Less code looks like to give you a general idea.

The above code is short and sweet, but, most importantly, it is packed full of a ton awesome capabilities.

About the Syntax

The code sample above does a few things:

It imports Bootstrap CSS files with all their awesome Less mixins

On hover and focus of the a tag, it will brighten by 50%

The a tag inherits all of the properties of .fancy-text()

You can see from just this example how efficient writing in Less can be for front-end developers.

What can happen on save

Since Less is a preprocessor, it has to be compiled into CSS before it can be used. During this process, you can inject your own tasks to happen at the same time. Some of things are (and that will be showed later):

Checks for errors

Autoprefixes for older browsers

Combines (concats) all files into one

Minify the code

Livereload a webpage (not part of this demo)

There's a million different ways to do this and tailor it for your app site's unique needs.

How to Compile Less into CSS

In my personal opinion, picking up the syntax of Less is the easy part - especially since it feels like a natural extension of CSS. I believe the biggest hurdle for developers with Less is the compiling compenent. Between people using different local / server environments, being scared of the command line, or just the hurdle caused by learning a task-runner, integrating Less or any preprocessor can be quite troublesome without some guidance.

Using Gulp

Gulp is a Javascript based task runner. In layman terms, it helps you automate your development workflow. Things like minifying CSS, moving files to production folders, and even compiling Less to CSS. This is my preferred way of compiling Less.

Need a Gulp intro? Scotch.io guest writer, Justin Rexroad, wrote an amazing blog post on Getting Started with Gulp. He teaches you some really important things and how to customize it.

I'm going try and make this dead simple by removing all of the overhead of Less and Gulp for you. This way you can dive right in. I've already configured a dead simple Gulp setup with Less configured for you. You can check it out here.

First install Node.js by downloading it here. Then, here's what you need to do to get started (this is for Mac users, Windows will be nearly identical):

Video Demo

Other Methods to Compile Less

There's a bunch of ways to compile Less into CSS. The Gulp starter above is great because it does it in a way that allows you to do a lot more in the future. It's also easy to share the Gulp file with other developers so they don't have to figure out compiling on their own. Plus, it's free!

If you want to check out other ways though, look into these resources:

Importing

Importing works very similar to regular CSS importing. The main difference is you way you treat it though. With raw CSS, you typically don't want to do too many imports for performance reasons. With Less, it's actually really smart to treat them like includes. Some of the benefits:

Easier to collaborate with others

Variables are shared across imports

Creates (almost forces) a modular and dry approach to front-end development

For example, with Twitter's Bootstrap and Less, you only have to include one Less file, yet you get a ton of well organized goodies.

Mixins

Mixins are exactly what they sound like. You can literally mix and match CSS classes with each other. For example, with Bootstrap you might have put all these classes in your HTML to build a big sexy button:

<a href="https://scotch.io" class="btn btn-success btn-lg btn-block">

That's one approach, but with Less, you could do something like this:

.big-sexy-button {
.btn;
.btn-success;
.btn-lg;
.btn-block;
}

Here, you are remaking that big sexy button by only adding the class big-sexy-button. I love this concept. You are literally building and combining classes from existing ones. Your HTML stays super clean, and your CSS remains simple.

Mixins as a Function

Mixins can also be functions. This way you can pass a variable or parameter to your added mixin. For example, check this mixin out that puts a border only on the top of a div.

Conclusion

I've been familiar with all of the benefits of CSS preprocessors for quite a while. Admittedly, at first I was reluctant to push it into my production environment in fears of making it difficult for people who were collaborating, creating unnecessary overhead for myself, or simply burning too much time on configuration. I'm a strong believer of using the right tool for the job and never overengineering anything. Less is actually none of these.

I can't stress enough the benefits gained while using it. I really hope this tutorial combined with the provided Gulp Starter for Less is enough to get you going. Taking that leap in using preprocessors on a regular basis is totally worth it in every way.

Finally, if you're interested in also learning SASS, Ken Wheeler, a wizard from Narnia, wrote an excellent scotch post on it earlier here.