Get into LESS

In order to rewrite the current css file of html5-client using LESS template,
I spent two days to discover how to use LESS. The followings are some important notes for reference:

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

Syntax: @body-color: blue;

Variable scope

The scope of a variable refers to the places where it is available. If you define a variable at the very start of your LESS file it will be available to any code you write after it.
You can also define a variable inside a CSS rule. In this case the variable is not available outside of this ruleset; it can only be used locally.

@color: #941f1f;     // global variable
    @unit: 3px;      //local variable
    border:@unit solid @color; //using global variable @color
    padding: @unit * 3;
    margin: @unit * 2;
button {
    background: #941f1f + #222222;
    border: #941f1f - #111111;
    margin: @unit;           // won't work, @unit is out of scope


Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.

.rounded_top {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
.tab {
    background: #333;
    .rounded_top; //simply import previous .rounded_top element
.submit {
    .rounded_top; // reuse previous .rounded_top element

Parametric mixin:

You can create a mixin and pass a value to it.

.rounded_top(@radius:3px) { //3px is the default value
    -webkit-border-top-left-radius: @radius;
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topleft: @radius;
    -moz-border-radius-topright: @radius;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
.tab {
    background: #333;
.submit {
.button(@radius:3px, @background: #e7ba64, @padding: 4px) { // passing multiple value
    border: 1px solid @background - #222;
    padding: @padding;

color function:

saturate(@color, 10%);                  // return a color 10% points *more* saturated
desaturate(@color, 10%);                // return a color 10% points *less* saturated
lighten(@color, 10%);                   // return a color 10% points *lighter*
darken(@color, 10%);                    // return a color 10% points *darker*
fadein(@color, 10%);                    // return a color 10% points *less* transparent
fadeout(@color, 10%);                   // return a color 10% points *more* transparent
fade(@color, 50%);                      // return @color with 50% transparency
spin(@color, 10);                       // return a color with a 10 degree larger in hue
mix(@color1, @color2, [@weight: 50%]);  // return a mix of @color1 and @color2
greyscale(@color);                      // returns a grey, 100% desaturated color
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); 
                                        // return @darkcolor if @color1 is > 43% luma
                                        // otherwise return @lightcolor, see notes

@arguments key word:

It will output all parameters one after the other in the order given.

.gray_border(@width: 1px, @type: solid, @color: #bbb){
div {
    .gray_border(2px, dashed);
=======> Your less file would be:
div {
    border:2px dashed #bbb;

Create namespace and nested rules:
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

    p {
        margin: 12px 0;
    a {
        text-decoration: none;
    .submit {
        background: red;
        color: white;
        padding:5px 12px;

Importing other css or less file:

@import "reset.min.css";
@import "framework.less";
@import "widgets";

Highly recommend the twitter bootstrap in LESS. Any comments?

This entry was posted in open-source. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s