Introduction to LESS

From Documentation
Revision as of 05:31, 7 April 2022 by Hawk (talk | contribs)


Introduction to LESS



Stop.png This article is out of date, please refer to ZK Developer's Reference ...Theme Template for more up to date information.

Introduction

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

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

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;
}

References

Version History

Last Update : 2022/04/07


Version Date Content
     



Last Update : 2022/04/07

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