Less Basics

Summary

Below you will find a collection of tutorials teaching the basics of Less, the CSS extension language and preprocessor.

Before You Start

These tutorials assume you have a basic understanding of the terminal, npm and CSS.

Exercises

You can download exercises to go along with these tutorials on our Less exercises repository on GitHub. You don’t have to know how to use GitHub to use them. Just click the green Code button in the corner and click the Download ZIP option. Then unzip the folder and open it in your text editor.

Tutorials

Introduction

Why should I use Less?

Learn why you should use Less.

Setup

Install Less

Learn how to install Less.

How to use Less in a web project

Learn how to use Less in a web project.

Less Features

Comments

// Single line comment example

/* Multi-line
   comment
   example */

Variables

@main-color: red;

p {
  color: @main-color;
}

Mixins

.custom-colors {
  background-color: green;
  color: yellow;
}

p {
  .custom-colors();
}

Nesting

#my-section {
  h1 {
    color: red;
  }

  p {
    color: blue;
  }
}

Imports

If you have a file named name.less, you can import it like this:

@import 'name';

Source maps

Learn more about source maps.

Extra

Using Less with Git

When using Less with Git, you should add your CSS file(s) or folder(s) to your .gitignore file.

Notice any errors? Have other questions or suggestions? Send your comments and questions to contact@simpledev.io.