Introduction to LESS

From Documentation


Introduction to LESS



Introduction

LESS is the dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations, and functions.

LESS was developed by Alexis Sellier, more commonly known as cloudhead. It is now maintained and extended by the LESS core team.

Basic Usage

The following content demonstrates simple usages of LESS, please refer to LESS official site for more details. You can also try it online from http://less2css.org/

Variables

Define variables with "@" sign and use it as follows:

@green: #46A546;

.greendiv {
    background: @green;
}

will output

.greendiv {
    background: #46A546;
}

Mixins

Define a mixins as follows:

.top-border-radius(@size) {
    -webkit-border-radius: @size @size 0 0;
       -moz-border-radius: @size @size 0 0;
            border-radius: @size @size 0 0;
}

.topRoundedDiv {
    .top-border-radius(5px);
}

will output

.topRoundedDiv {
    -webkit-border-radius: 5px 5px 0 0;
       -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
}


Version History

Last Update : 2022/04/08


Version Date Content
     


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.