Preprocesadores, la manera de estructurar mejor nuestro css

Estamos habituados al uso de hojas de estilo para dar un diseño agradable a nuestras paginas web, y al mismo tiempo estamos acostumbrados a ver archivos css de miles de lineas de código debido a que crear varios archivos css significaría que por cada uno de ellos habrá una petición más al servidor, y eso no es algo que queramos, por ello terminamos con estos archivos demasiado grandes donde intentamos no perdernos cada vez que queremos modificar un estilo. En el mejor de los casos tenemos el código comentado por áreas como puede ser la cabecera, el píe de página, el contenido principal, etc. Estos problemas pueden ser más llevaderos haciendo uso de preprocesadores como Sass, Less o Stylus, los cuales aparte de darnos mas dinamismos a la hora de escribir los estilos de nuestras paginas web como puede ser dándonos herramientas como el uso de funciones, variables y el objetivo de este post, poder tomar varios archivos de estilos y combinarlos y/o comprimirlos en uno solo, además de otras características bastante útiles. Esta funcionalidad la veremos ahora con less y un poco de ayuda de node.js que es el que permite ejecutar los comandos del preprocesador less. En este ejemplo simularemos que tenemos los siguientes archivos de estilos:

• main.less
• header.less
• footer.less
• menu.less
• forms.less
• tables.less

Ahora, en mi caso uso una distribución de Linux llamada Linux Mint 17, que es una distribución basada en Ubuntu y la instalación de node.js y less se puede hacer a través del sistema de paquetes apt-get. Los comandos a usar para instalar node.js, npm (gestor de paquetes de node.js) y less son los siguientes: sudo apt-get install -y nodejs sudo apt-get install -y npm sudo npm install -g less Una vez instalados estos programas ya esta todo listo para funcionar. Lo que queda por hacer es usar uno de los archivos como archivo principal, en este caso es el archivo main.less y en su contenido importaremos los otros archivos .less (como se ve en la imagen de arriba). Después en la consola si solo queremos combinar los archivos y crear un solo archivo css bien estructurado y entendible al ojo humano ejecutamos lo siguiente: nodejs /usr/local/bin/lessc main.less > main.css Por el contrario si lo que queremos es combinarlos y que su contenido esté comprimido para una descarga más rápida ejecutamos lo siguiente: nodejs /usr/local/bin/lessc -x main.less > main.min.css Con esto que acabamos de hacer se compilará un nuevo archivo main.css listo para usar en producción y mientras cada ves que queramos actualizar los estilos, esta tarea será mas sencilla.