Here is a quick reminder on how to use LESS, one of the many CSS precompliers:

Variables: As they are in porgramming languages

@greenColor: #00FF00;
@font-family: Georgia

.makeItGreen {

background-color: @greenColor;
font-family: @font-family;
}

Mixin: For style sheet/rules reuse

@greenColor: #00FF00;
@font-family: Georgia

.makeItGreen {
background-color: @greenColor;
font-family: @font-family;
}
.greatGreenStyle {
.makeItGreen; // here is the reuse
}

Reusing rules from a different file

@import “element.less”

.makeItRound{
.round(1px);
}

Note: This has to be in the same location as the less file in question

Nesting

nav {
width: 200px;
height: 100px;
li {                                                      /* nested */
width: 100px;
background-color: green;
a {                                              /* second nested-level: nav li a */
color: lime;
}
}
}

Nesting with pseudo class

a {
font-family: Georgia;
&.hover {
color: green;
}
}

Note: & refers to the current rule
Arithmetic

@height: 200px

div {
height: @height * 2;
}

Note: Similar principle applies to other arithmetic operations