Less es un preprocesador de hojas de estilo CSS que extiende el lenguaje y añade características avanzadas como variables, mixins, funciones y mucho más, lo cual permite dinamizar nuestras hojas de estilo para hacerlas más mantenibles y extendibles sin complicar el desarrollo de nuestras hojas de estilo, ya que Less usa la misma sintaxis básica que CSS.
A continuación os mostramos algunos ejemplos básicos que ilustran a la perfección las características dinámicas que Less proporcina a tus hojas de estilo:
Uso de variables
// declaración de variables
@anchura-borde: 1px;
@rojo: #842210;
// uso variables
div#header {
border: @anchura-borde solid @rojo;
}
Se compila a
div#header {
border: 1px solid #842210;
}
Uso de mixins y mixins paramétricos
// mixin paramétrico con valor @radio de 5px por defecto
.borde-radio-por-defecto(@radio: 5px) {
border-radius: @radio;
-moz-border-radius: @radio;
-webkit-border-radius: @radio;
}
#borde-por-defecto {
.borde-radio-por-defecto;
}
#borde-ancho {
.borde-radio-por-defecto(30px);
}
Se compila a
#borde-por-defecto {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#borde-ancho {
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
Uso de funciones incluidas en Less
@color-base: #f04615;
#fondo-normal {
background-color: @color-base;
}
#fondo-claro {
background-color: lighten(@color-base,20%);
}
#fondo-oscuro {
background-color: darken(@color-base,30%);
}
Se compila a
#fondo-normal {
background-color: #f04615;
}
#fondo-claro {
background-color: #f69275;
}
#fondo-oscuro {
background-color: #651c07;
}
¿Cómo uso Less en mi página web?
Existen varias formas de compilar una hoja de estilos Less, desde el servidor usando Node.js, desde el lado del cliente o usando una herramienta de terceros que transforme nuestro código Less a CSS.
La más sencilla para empezar a desarrollar nuestra hoja de estilos es desde el lado del cliente, para ello hay que enlazar nuestra hoja de estilos Less en nuestro código HTML
<link rel="stylesheet/less" type="text/css" href="estilos.less" />
El siguiente paso es incluir el procesador de Less que convierte el código en CSS estándar dentro del tag <head> de nuestro HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script>
Debemos asegurarnos de incluir primero la hoja de estilos y después el procesador.
Es recomendable que una vez nuestra hoja de estilos está terminada usemos una herramienta de terceros que genere un único archivo CSS para ganar en rendimiento y fiabilidad.
Referencias:
http://lesscss.org/ Página oficial de Less
http://less2css.org/ Procesador online de Less -> CSS
