Escribir código CSS de una página web, es por lo general, una tarea que consume mucho tiempo y esfuerzo, además de estar muy lejos de ser un proceso eficiente. Especialmente, si deseamos modificar la maquetación CSS con posterioridad.
Existen herramientas dentro del mundo PHP que permiten mejorar la codificación de estilos CSS, como es el caso de TurbineCSS. Que usa la característica dinámica de PHP para facilitar el mantenimiento de las hojas de estilo CSS.
Esta dificultad es consecuencia directa de las limitaciones de la especificación CSS, que impide incluir las características básicas que tienen los lenguajes de programación formales.
Para resolver este problema de mantenibilidad del código de estilos CSS, ha surgido los preprocesadores de CSS tales como: Stylus, LESS o SASS.
Escribir un CSS eficiente
Ese es el problema de la creación de hojas de estilos CSS, el código no es eficiente y su mantenibilidad es penosa, por decir lo menos. Que se traduce, por ejemplo, en la incapacidad de definir variables en el CSS más allá de usar la unidad 'em' de la dimensión física de los elementos a estilizar.
Vamos a algo más concreto, mirando esta porción de una hoja de estilo:
#header {
background-color: #eee;
border: 1px solid gray;
color: #555;
padding: 8px;
}
#footer {
background-color: #efe;
border: 1px solid gray;
color: #666;
padding: 8px;
}
Si observamos el código CSS, nos damos cuenta que el atributo 'border' y 'padding' tiene el mismo valor para ambos selectores "#header", "#footer".
Claro podríamos resolverlo creando una nueva clase CSS, para evitar la repetición en el código, por ejemplo:
.mi_borde {
border: 1px solid gray;
padding: 8px;
}
....
Y sucesivamente aplicando el estilo en el código HTML:
....
<div id="header" class="mi_borde">
....
</div><-- Fin Header -->
....
....
<div id="footer" class="mi_border">
...
</div><-- Fin Footer -->
Sin embargo, no es una solución muy eficiente pues agregamos código al HTML. En este como otro tipo de problemas, viene a resolverlos el denominado pre-procesado CSS.
En este artículo vamos a examinar un lenguaje de pre-procesado CSS en particular, llamado LESS.
Pre-procesado del CSS dinámico
LESS formula un tipo de lenguaje con una sintáxis casi idéntica al CSS, pero incorporando algunas valiosas característica que son de gran ayuda en la generación del CSS.
LESS deja atrás el código CSS estático tradicional e implementa un CSS dinámico que tiene la ventaja de ser muy fácil de aprender. Dentro de las principales facilidades de este lenguaje CSS dinámico se distinguen:
- Uso de variables.
- Anidación de Reglas y Clases.
- Uso de Funciones y Operadores aritméticos.
LESS: Uso de variables
Por ejemplo, incorporar el uso de variables en el código CSS original es muy simple y directo. La sintaxis de la instrucción se hace usando el simbolo '@'' junto a una secuencia de caracteres que definen el nombre de la variable y se delimitar con el símbolo ':' para continuar con el valor de la variable finalizando la instrucción con el símbolo ';', muy similar a como se definen los estilos en el CSS tradicional.
Podemos ver un ejemplo en el código:
// Código en LESS
// defiendo variables:
@mi_borde_color: gray;
@mi_borde: 1px solid @mi_borde_color;
@mi_padding: 8px;
#header {
background-color: #333;
border: @mi_borde;// uso de la variable 'mi_borde'
color: #555;
padding: @mi_padding;
}
#footer {
border: @mi_borde;// uso de la variable 'mi_borde'
color: #666;
padding: @mi_padding;
}
LESS: Anidación de Clases
También podemos re-utilizar el código CSS dinámico (código LESS), incluyendo todas las propiedades CSS de una clase en otra, del siguiente modo:
// Código en LESS
// usando Mixins:
.mi_estilo (@color: #555) {
border: 1px solid gray;
color: @color;
padding: 8px;
}
#header {
background-color: #333;
.mi_estilo; //usando el parámetro por defecto
}
#footer {
color: #666;
.mi_estilo(#666);
}
LESS: Uso de Operadores Aritméticos
El uso de operadores aritméticos permiten facilidades al usar variables en LESS, especialmente útiles al calcular variaciones desde un color base.
@verde: #006600;
@azul: #000077;
@combinado: (@verde + @azul); // sumando números hexadecimales
.fondo {
background-color: @combinado;
}
Usando CSS dinámico localmente...
Se puede usar un archivo de estilos escrito en LESS sin usar pre-pocesado, y que este sea directamente interpretado por código javascript del navegador.
Para usar LESS localmente debemos crear dentro de un directorio los siguientes archivos:
- Crear un archivo de texto y escribir los estilos CSS en lenguaje LESS y guardarlo con el nombre 'estilos.less'.
- Bajar el intérprete javascript de LESS desde la página: http://lesscss.org/ y guardarlo en el mismo directorio del archivo anterior, pero con el nombre 'less.js'.
- Crear un documento HTML, he indicarle al navegador donde se encuentra el intérprete de LESS, usando sólo dos (2) líneas de código antes de cerrar la etiqueta 'head' del documento HTML se logra la tarea:
<html>
<head>
<title>.... </title>
....
<link rel="stylesheet/less" type="text/css" href="estilos.less" />
<script src="less.js" type="text/javascript"></script>
</head>
El archivo "less.js" se puede descargar desde: https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js
Aunque no es recomendable usar directamente este CSS dinámico en el código del navegador, por una degradación de la velocidad de despliegue de la página web. Sin embargo, resulta útil conocer esta forma de usar LESS para practicar con el lenguaje, y explorar las nuevas posibilidades que nos entrega esta forma moderna de escribir el CSS.
Nota: Se recomienda probar LESS en el navegador Firefox, puesto que en Internet Explorer no funciona y en Google Chrome al igual que Safari, hay que deshabilitar la seguridad para que funcione sobre un archivo localmente (sin usar un servidor web).
Twitter Bootstrap usa LESS !
Por otro lado, aprender LESS resulta muy apropiado si ya estamos usando twitter Bootstrap como framework front-end en aplicaciones web tradicionales o en móviles, pues es precisamente LESS el lenguaje como están codificados los estilos CSS de este framework.
Así, si deseamos hacer una profunda personalización de twitter Bootstrap, no existe otro modo más efectivo que sumergirse en el código de estilo CSS escrito en LESS.
Esto responde a la pregunta: ¿Por qué usar LESS?
Conclusión
LESS entrega muchos recursos para mejorar la codificación CSS, a parte de los mencionados hasta el momento en este artículo. Por ejemplo, en LESS es posible integrar múltiples archivos de CSS dinámico usando la instrucción:
@import "path/to/file/variables.less";
@import "path/to/file/mixins.less";
...
Esto facilita la administración y separación de los archivos de estilos less para proyectos de grandes dimensiones, o tal vez nos motiva a desarrollar una biblioteca de estilos CSS dinámicos mucha más fácil de usar.
Como vemos, este recurso de pre-procesamiento de estilos transforma la tediosa tarea de escritura de CSS en una tarea mucho más eficiente y sencilla, y además nos da la posibilidad de mantener un código más conciso para nuestros proyectos.
Por otro lado, es muy simple comenzar a practicar con él usando sólo:
- Un Editor de Textos cualquiera (sublime text).
- Un navegador de Internet como MozilLa Firefox.
- Y el Intérprete Javascript de LESS (less.js), sin la necesidad de usar un servidor web de desarrollo local.
Un preprocesador muy sencillo de usar y disponible en el sistema operativo windows es SimpLESS, aparte de otras herramientas que usan Node.js.
Así, sólo resta practicar con el lenguaje LESS, pues como dicen la práctica hace al maestro, e incorporarlo en nuestro flujo de trabajo y comenzar un desarrollo web moderno con un CSS dinámico.
Otros Recursos
Un compilador de LESS en el sistema operativo windows es SimpLESS:
Un útil recurso que permite integrar LESS en desarrollos usando el framework .NET:
