Empezar con LESS rápido

Publicado en Dic 20, 2014

No nos engañemos LESS no hace magia, si no sabes CSS de poco te servirá LESS, por eso es importante que te manejes bien con CSS antes de empezar con LESS.

Aquí veremos los conceptos más básicos para empezar con LESS rápido. Supongo que ya tienes instalado LESS y si no puedes ver como se hace aquí.

Variables

LESS incorpora la posibilidad de utilizar variables en nuestros CSS cosa que es sumamente útil porque ¿Cuantas veces no te acordabas del hexadecimal de aquel color de aquella fuente con aquella fuente que tampoco recuerdas?.

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

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

/*Uso de variables*/

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

a{
	color:@enlaces;
}

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

	//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.

/*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.

/*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 ahorarnos 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.

Más información:
Estilos dinámicos con LESS CSS
Referencia oficial de LESS
Referencia de funciones LESS