Leyendo el artículo de Alex McPherson sobre “cómo se está usando el CSS en la red”, me ha hecho pensar en cómo yo utilizo mis CSSs y qué herramientas existen para poder facilitar el desarrollo de CSS, para que este sea más rápido y flexible.
El el informe sobre ficheros de CSS de más de 8.000 dominios de los más populares del mundo, de McPherson es hay información sobre cómo se está utilizando y escribiendo el CSS. Entre otras curiosidades, es posible ver la cantidad de código erróneo que existe en las hojas de estilos sin que los desarrolladores se den cuenta.
El tema es que, a día de hoy desarrollar proyectos en que el CSS es un elemento importante y no utilizar un Preprocesador de CSS, parece muy mala idea. Existen en la red diferentes soluciones y la decisión de cual utilizar depende de cada desarrollador, pero una que me parece muy madura es Sass.
Sass es una herramienta que te permite, entre otras cosas hacer un cambio en un sitio y ver este cambio reflejado en toda la hoja de estilos.
¿Qué es Sass?
Sass, Syntactically Awesome Stylesheets es un preprocesador de CSS, un lenguaje de Hojas de Estilo en Cascada que es traducido a CSS y se autodefine como “CSS con superpoderes” y la “extensión de CSS más estable y potente del mundo”.
Sass permite usar variables, bloques de código reutilizable, mixins y funciones. Posteriormente a través de la línea de comandos es posible traducir o complicar este código al CSS. Sass es una extensión de CSS3 y através de su sintaxis SCSS, “Sassy CSS” permite que todo documento CSS3 válido, sea un documento SCSS válido.
Creo que utilizar un preprocesador como Sass, tiene muchas ventajas y permite utilizar el concepto DRY (Don’t repeat yourserf, No te repitas). DRY es un concepto importante en la programación y desarrollar en CSS “a mano” tiene el efecto contrario en la mayoría de las veces. De esta forma Sass permite ahorrar tiempo y posibilita que sea más fácil de mantener el código, una vez que las variables sólo se definen una vez. Esto ayuda a mantener el CSS organizado.
Con Sass es posible definir múltiples selectors con un conjunto de propiedades, esto permite que selectors puedan heredar propiedades de otros selectors. De hecho Sass, permite agrupar selectores con valores idénticos.
Extensiones
Además de otras extensiones, Compass es una extensión rica de Sass con diferentes mixins, diferentes características, o reglas que pueden ser reutilizadas y que tienen sintaxis de CSS3.
Compass y Sass son herramientas utilizadas en muchos proyectos importantes en la web. Linkedin es uno de estos casos.
Sass necesita Ruby para funcionar y es procesado del lado del servidor.
¿Utilizas Sass, Compass? ¿Cómo ha sido tu experiencia?
Fuentes:
