Declaring variables:

Less code :

@border-width: 1px;
@red: #842210;

// Using variables
div#header {
border: @border-width solid @red;
}

Css output:

div#header {
border: 1px solid #842210;
}

Mixins:

less code:

// The bordered class
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

// We reuse the contents of the bordered class
// in #menu a and .post a
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}

css code:

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

parametric mixin

less code:

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

// Which can be used like this:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}

// A parametric mixin with a default value:
.border-radius-with-default(@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

// Which can be used like this:
#content {
.border-radius-with-default;
}

// You can also use a parametric mixin
// without any parameters. This is useful if
// you don’t want the original mixin itself
// in the css output
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap;
}

css output:

#header {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}

Nested rules

less code

// In LESS you can nest your rulesets.
// This is a very important feature because:
// -You don’t have to write out repeating long
//  selectors
// -It helps to structurize your code

#content {
width: 500px;

a {
color: white;

// You can use the ‘&’-selector to
// apply a nested selector to the
// parent selector:
&:hover {
color: blue;
}

&.selected {
color: yellow
}
}
}

css code:

#content {
width: 500px;
}
#content a {
color: white;
}
#content a:hover {
color: blue;
}
#content a.selected {
color: #ffff00;
}

Operations

less code

// In LESS you can operate on any number,
// color or variable.

// Basic operations
@base: 200px;
@height: @base * 2;
@min-width: @base + 100;
@max-width: (@min-width – 50) * 2;

.basic_operations {
height: @height;
min-width: @min-width;
max-width: @max-width;
}

// Operating on colors:
@base-color: #444;

.color_operations {
color: @base-color / 4;
background-color: @base-color + #111;
}

css code:

.basic_operations {
height: 400px;
min-width: 300px;
max-width: 500px;
}
.color_operations {
color: #111111;
background-color: #555555;
}

Scope 

less code

// Scope in LESS is very similar to that of
// programming languages. Variables and mixins
// are first looked up locally, and if they
// aren’t found, the compiler will look in the
// parent scope, and so on.

@var: red;

#page {
@var: white;
#header {
color: @var; // white
}
}

#footer {
color: @var; // red
}

css code

#page #header {
color: #ffffff;
}
#footer {
color: #ff0000;
}

Learn LESS in less than 20 minutes!

http://winless.org/online-less-compiler

http://freebiesbug.com/code-stuff/html-ui-kits/