Compiladores CSS, qué son y para qué sirven

Los compiladores de CSS son una tendencia que los últimos años se está convirtiendo en una metodología ágil de trabajo.

Los que nos dedicamos al mundo del web y tenemos que desarrollar un rendimiento de front-end, hemos de lidiar con las hojas de estilos. Una de las principales desventajas que tienen a la hora de maquetar es que te encuentras muchas veces repitiendo código casi idéntico, sobre todo cuando tienes que trabajar con descendencia, es decir, los elementos que están anidados.

Para ahorrarnos horas con estos temas y mejorar el comportamiento de los estilos, han aparecido en los últimos años los compiladores de CSS. Que… ¿qué son? Pues son sencillamente un tipo de sintaxis que está más orientada a un lenguaje de programación.

La ventaja es que esta sintaxis no se diferencia mucho del CSS original, lo único que ahorra tiempo a la hora de escribirlo y también permite según nuestras necesidades escribir el CSS convencional. Eso sí, si usamos cualquiera de los compiladores, deberíamos tener muy clara la estructura que va a seguir nuestro proyecto para que el código nos quede aseado, majo y lo más claro posible.

Hoy por hoy tenemos varios sistemas para poder trabajar de esta forma. Por un lado, existen compiladores basado en JavaScript y, por otro, los que son más propios de lenguaje de servidor.

Less trabaja en el lado del cliente y es más conocido por eso, aunque también podríamos ejecutarlo desde el lado del servidor con Node.js o Rhino . En el lado del cliente lo haremos llamando a la hoja de estilos con extensión .less y luego al script de less.js

Otra forma de trabajar con los archivos .less es hacerlo en un editor de código normal y corriente y luego usar programas que lo compilan y lo reducen a una sola línea en CSS. Estos programas son Winless para Windows y Less.app para Mac y tienen la función de que, cuando se guarda el archivo en nuestro editor, ya se está compilando en CSS.

less_sass

Si queremos trabajar en el lado del servidor, tendríamos soluciones como la de Sass. En este caso necesitarás un servidor de Ruby, una vez instalado podemos instalar SASS con la consola de comandos.
A partir de ahí tendremos la posibilidad de trabajar con dos tipos de archivo, uno es el .SCSS y el otro .SASS. La segunda es un poco más antigua y tiene una sintaxis más similar al CSS tradicional.

Al fin y al cabo son dos maneras de hacer lo mismo, quienes trabajan más del lado del cliente entiendo que preferirán más las hojas de estilos less, además, Bootstrap from Twitter también lo usa. Sin embargo, si estás más habituado a trabajar con la parte del servidor, seguramente prefieras el Sass en el que está basado Compass.

¿Tienes alguno preferido? Comenta tu experiencia sobre los compiladores de CSS.

Artículos recién salidos del horno

Suscríbete a nuestro blog y recibe en tu email nuestras noticias.

Al inscribirte a nuestra newsletter, aceptas la política de privacidad