Variables en LESS

El lenguaje LESS permite usar variables. Una variable representa un contenedor, en el que se pueden almacenar algunos datos y utilizarlos en los lugares necesarios del código.

Para crear una variable, es necesario idear su nombre y colocar el símbolo @ antes del mismo. Luego, después del nombre de la variable, colocamos dos puntos e indicamos el valor de esta variable. Vamos a crear como ejemplo una variable con el nombre var:

styles.less@var: 20px;

Ahora vamos a utilizar esta variable como valor de una propiedad:

styles.lessp {
  font-size: @var;
}

Como resultado, después de la compilación a CSS, en lugar de nuestra variable se sustituirá su valor:

styles.cssp {
  font-size: 20px;
}

styles.less@color: #000;

p {
  color: @color;
}