Less (lenguaje de hoja de estilo)
| ||||||||||||||||
Less es un lenguaje de hojas de estilo dinámico. Less agrega a CSS comportamiento dinámico como variables, mixins, operaciones y funciones. LESS funciona tanto en el lado del cliente (Chrome, Safari, Firefox) y del lado del servidor, con Node.js y Rhino.
Sumario
Funcionamiento
Para utilizar LESS no es necesario un plug-in ni nada especial. La idea detrás de la herramienta es que el navegador interpreta código CSS normal y corriente producido a través de un proceso de compilación de las plantillas escritas en LESS. Lo único que cambia es la forma que se compila las plantillas LESS. Es posible utilizar un servidor Web basado en Node.js o bien servir las hojas de estilo CSS a través de un script en cualquier lenguaje como PHP, Pitón, Ruby o Perl. Para compilar las plantillas LESS en tiempo de ejecución del lado del servidor se utiliza Node.js, por citar un ejemplo.
Cómo se usa
Hay varias formas de utilizar LESS CSS, una de ellas es a través de javascript del lado de servidor usando node.js, otra es utilizando Javascript del lado del cliente con less.js y por último usando una aplicación que compile los estilos .less a .css.
Al iniciar a trabajar con LESS CSS es un error querer utilizar la versión de javascript del lado del cliente. Es un error porque esta versión se consideró para uso en ambientes de desarrollo —al ser más rápido de corregir en caso de error—, además es lenta y aumenta el riesgo de fallar al depender completamente de Javascript. Para hacer experimentos locales o iniciar está muy bien pero para producción no se recomienda.
Variables
Las variables le permiten especificar los valores utilizados en un solo lugar, y a continuación, volver a utilizarlos a lo largo de la hoja de estilos, por lo que puede hacer cambios globales tan fácil como cambiar una línea de código. Ejemplo:
* ------ Código LESS ------*/
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
/* ------ salida CSS compilado ------ */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
Mixins
Los Mixins permiten introducir todas las propiedades de una clase a otra clase con sólo incluir el nombre de la clase como una de sus propiedades. Es igual que las variables, pero para clases enteras. Mixins también puede comportarse como funciones, y tomar argumentos, como se ve en el ejemplo de abajo.
/* ------ código LESS ------ */
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* ------ salida CSS compilado ------ */
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
Reglas anidadas
En lugar de construir largos nombres de selector para especificar la herencia, en LESS es posible anidar selectores simples dentro de otros selectores. Esto crea hojas de herencia claras y estilo más corto.
Ejemplo:
/* ------ código LESS ------ */
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* ------ salida CSS compilado ------ */
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
Operaciones
Las operaciones permiten sumar, restar, dividir y multiplicar valores de propiedad y colores, lo que permite crear complejas relaciones entre propiedades. Las operaciones no se deben efectuar dentro de paréntesis, a fin de garantizar la compatibilidad con CSS.
/* ------ código LESS ------ */
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
/* ------ salida CSS compilado ------ */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
Uso del lado del Cliente
Del lado del cliente es la forma más fácil y buena de empezar el desarrollo de código less. Para la producción y especialmente si es importante el rendimiento, se recomienda pre-compilar utilizando node o alguna de las muchas herramientas de terceros. Esto de logara enlazando las hojas de estilo LESS con el atributo rel ajustado a stylesheet/less.
Ejemplo:
<link rel="stylesheet/less" type="text/css" href="styles.less"/>
A continuación es necesario enlazar less.js en la cabecera de la página web.
Ejemplo:
<script src="less.js" type="text/javascript"></script>
Uso Del lado del servidor
La forma más fácil de instalar LESS en el servidor, es a través de la NGP, el gestor de paquetes de node, así:
$ npm install -g less
