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.