Si has trabajado aunque sea un poco con Las Hojas de Estilo en Cascada (CSS) es muy probable que hayas realizado algo como lo siguiente:

.clase1 {  
    background: #000;  
}  
.clase2 {  
    background: #FFF;  
    color: #000;  
}  
.clase3 {  
    border: 1px solid #000;  
	color: #F00; 
} 

Claramente, vemos que existen valores repetidos a lo largo del CSS anterior; si quisiéramos cambiar (por ejemplo) el color negro (#000) por algún otro color como rojo (#F00) tendríamos que aplicar el cambio en tres sitios distintos (para nuestro ejemplo).

Las Variables en LESS CSS

La cosa se complica bastante cuando la Hoja de Estilo crece y quisieras hacer un completo cambio en la misma; para esto LESS CSS nos ofrece el uso de las Variables.

Las Variables en LESS CSS funcionan exactamente como cualquier variable en cualquier lenguaje de programación habido y por haber; es decir, las variables permiten especificar los valores utilizados en un solo lugar y poder utilizarlos a lo largo de la Hoja de Estilo, esto trae como ventaja que los cambios globales pueden resolverse tan fácilmente como cambiar una línea de código; el valor de la variable en sí:

@color: #000;  
  
.clase1 {  
    background: @color;  
}  
.clase2 {  
    background: #fff;  
    color: @color;  
}  
.clase3 {  
    border: 1px solid @color;  
	color: #F00; 
} 

Al compilar el código LESS anterior obtendremos:

.clase1 {
  background: #000000;
}
.clase2 {
  background: #fff;
  color: #000000;
}
.clase3 {
  border: 1px solid #000000;
  color: #F00;
}

Valores de las Variables en LESS CSS

Podemos definir las Variables de LESS CSS prácticamente con cualquier valor:

@color: 1px solid black;  
  
.clase1 {  
   border: @color;  
}  
.clase3 {  
  border: 1px solid @color;  
	color: #F00; 
} 

Al compilar el código LESS anterior obtendremos:

.clase1 {
  border: 1px solid #000000;
}
.clase3 {
  border: 1px solid 1px solid #000000;
  color: #F00;
}

Incluso texto:

@contenido: "mi contenido";  
  
.clase1.before {  
  content: @contenido
} 

Al compilar el código LESS anterior obtendremos:

.clase1.before {  content: "mi contenido"; }

Variables como valores para las Variables en LESS CSS

También es posible definir las variables con un nombre de la variable:

@contenido: "mi contenido";  
@agregado: "contenido";
  
.clase1.before {  
  content: @@agregado;
} 

Al compilar el código LESS anterior obtendremos:

.clase1.before {
  content: "mi contenido";
}