Operations:
You can do basic math operations to numerical values and colors. Lets say we want to have two divs placed next to each other, the second one being twice as wide and with a different background.

@div-width:200px;
@bg-color: #999999;

div{
    display: inline-block;
    height: 150px;
    border:1px solid red;
}
.left{
    width: @div-width;
    background-color: @bg-color;
}
.right{
    width: @div-width * 2;
    background-color: @bg-color - 300;
}

Note:

@base: 2cm * 3mm; // result is 6
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
Advertisements