Cómo utilizar LESS (breve explicación)

Este post viene a cuento por que maquetando alguna que otra web me he dado cuenta de la cantidad de veces que he tenido que repetir código a la hora de escribir las hojas de estilo. Buscando un poco por internet encontré una pequeña explicación que me ha abierto los ojos con respecto a este «problema». En esta web se exponen algunos ejemplos que bien mirados puede ayudar mucho a la hora de utilizar este lenguaje. Que ahorre tiempo no implica que LESS haga un milagro, si no sabes CSS de poco te servirá, es importante tener conocimientos de  CSS antes de empezar con LESS.

En este post voy a reproducir los mismos conceptos básicos que se utilizan en la web que utilizo como referencia ya que no tengo mucho tiempo ahora mismo. Supongo que ya tienes instalado LESS, se puede utilizar tanto en windows como en linux, en esta web podrás consultar como hacerlo en Ubuntu a través de este artículo publicado anteriormente. Si lo necesitas en Windows en la página que utilizo como referencia tienen publicado un artículo referente a ello.

Cómo utilizar less

Variables de less

LESS incorpora la posibilidad de utilizar variables en nuestros hojas de estilo, cosa que es sumamente útil porque ¿Quién no se olvidó del hexadecimal de aquel color de una fuente, o de aquella fuente que tampoco recuerdas?. A mi me sucede a menudo, y cuando tienes escritas tres mil y pico líneas de código

// Definición de variables (Comentarios simples en CSS gracias a LESS)
@background-color: #f0f0f0;
@enlaces: blue;
@enlaces-hover-size: 18px;

//Variables selectores/propiedades
@b:body;
@bgcolor:background-color;

/*Uso de variables*/

@{b}{
	background:@background-color;
}

a{
	color:@enlaces;
}

p{
	//Uso de variable
	@{bgcolor}:green;

	//Operacion matemática
	height: 100+100px;
}

a:hover{
	font-size:@enlaces-hover-size;
}

Anidación

LESS nos permite anidar selectores para evitar tener que repetir lineas de código. Esto es algo que me ha venido muy bien y supongo que a muchos otros también les puede resultar muy útil.

/*Uso de la anidación*/

body{
	p{
		a{
			font-size:@enlaces-hover-size;
		}
	}
}

Mixins

Los mixins nos permiten meter bloques de código repetitivo en pequeñas funciones que podremos reutilizar. Esto a mi me ha venido bien para utilizar efectos CSS tan socorridos y que quedan tan bien en las páginas.

/*Mixins (son como funciones) */

//Mixin
.radius() {
   -webkit-border-radius:30px;
   -moz-border-radius:30px;
    border-radius:30px;
}

p{
	.radius();
}

//Pasar parametros
.radius(@px) {
   -webkit-border-radius:@px;
   -moz-border-radius:@px;
    border-radius:@px;
}

p{
	.radius(30px);
}

Mixin Guards

LESS también incorpora ciertas estructuras de control.

//Mixin Guards Condicional
.mixinB (@value) when (@value=true) {
  color: black;
}

h1{
	color:white;
	.mixinB(false);
}

Bucles

Además tenemos también bucles.

//Bucles

.loop(@cont) when (@cont > 0) {
  .loop((@cont - 1));    // proxima iteración
  height: ((500px/3) * @cont);
}

p {
  .loop(5);
}

En conclusión LESS es un lenguaje interesante para ahorrar tiempo a la hora de maquetar, aparte de lo que he comentado LESS incorpora un gran repertorio de funciones y características interesantes que podrás descubrir en su documentación oficial. No dejes de visitarla, ya que como he dicho esto no es más que un aperitivo de todo lo que se puede hacer …

Más información:

• Estilos dinámicos con LESS CSS
• Referencia oficial de LESS
• Referencia de funciones LESS