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.

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.