Siete razones para comenzar a utilizar SASS (u otro preprocesador CSS)

Un preprocesador CSS es una herramienta que nos permite generar CSS a partir de otro lenguaje de programación. Es decir, en lugar de escribir CSS, escribimos en SASS o en LESS, el preprocesador lo compila, y genera los CSS. Puede parecer mucha complicación eso de tener que aprender otro lenguaje para hacer CSS, tener que instalarse otro programa para compilar, etc, pero cualquiera que haya hecho un proyecto medianamente grande en HTML se habrá encontrado con hojas de CSS kilométricas, problemas a la hora de estructurar código, o habrá echado en falta no poder meter una maldita variable dentro del CSS. Y también, cualquier que haya empezado a utilizar un preprocesador sabe que después no hay vuelta atrás. Estas son las cinco razones principales por las que ahora utilizo SASS en todos mis proyectos:

1. Es muy sencillo empezar

El proceso de instalación de SASS no lleva mas de 5 minutos y solo hay que hacerlo la primera vez. Luego crear los scss (el formato de archivo de SASS) para cada proyecto son 5 segundos (un solo comando). En la página de SASS vienen varias formas de hacerlo, la que yo veo mas cómoda es utilizar Compass: http://compass-style.org/install/

El lenguaje de programación es muy sencillo de utilizar y se puede aprender de manera gradual. Si escribes CSS en un fichero SASS lo interpreta perfectamente, asi que puede empezar con CSS a ir introduciendo elementos SASS poco a poco.

Una vez estás utilizando SASS, no tienes que hacer nada mas, simplemente vas escribiendo el código en los ficheros SCSS y cada vez que guardas uno, Compass lo compila y genera el CSS correspondiente, por lo que puedes ver los cambios al vuelo en el navegador.

2. Puedes utilizar variables

En SASS se puede hacer cosas como:

Y evidentemente no solo para colores, sino para cualquier propiedad CSS e incluso para los Media Queries.

3. Puedes dividir tu código en trozos

En lugar de tener un CSS kilométrico con todo el código puedes dividir el código en partes. Por ejemplo un SCSS para el header, otro para el footer, etc…Luego en el fichero principal importas todos esos archivos y al final se acaba generando un único CSS.

Esto no es solo útil para organizar el código, también para reutilizar. Puedes tener tu SCSS con el reset que mas te guste, o con estilos que reutilices de un proyecto a otro y simplemente importarlo en cada nuevo proyecto.

4. Puedes elegir como generar el código

Minificado, comprimido, con comentarios, sin ellos….

5. SASS genera CSS-Sprites al vuelo

Con SASS puedes generar CSS-Sprites simplemente teniendo los archivos PNG en una carpeta. Al compilar, SASS los une en un solo archivo PNG y genera las clases CSS para cada icono utilizando el nombre de la carpeta y el del archivo. Por ejemplo, si tengo un icono llamado «sobre.png» dentro de mi carpeta «icons/», SASS generará una clase CSS llamada icons-sobre con el tamaño y las coordenadas correctas. Si tienes que modificar una de las imágenes del CSS-Sprite, simplemente hay que actulizarla en la carpeta y SASS regenera el CSS SPrite y todos los estilos asociados.

6. Puedes anidar selectores

En SASS puedes escribir algo como:

Este código generará el siguiente CSS:

No hay límite en la anidación de elementos, y el código es mucho mas legible.

7. Mixins!!!

Los mixins son funciones que permiten agrupar declaraciones CSS que vamos a reutilizar en varios lugares de nuestro código. Por ejemplo, para solucionar el problema de los prefijos en muchas declaraciones CSS podemos hacer algo como:

Una vez tenemos hecho este mixin lo podemos utilizar en cualquier parte de nuestro código con:

Que generará el siguiente CSS:

Además no tenemos que escribir estos mixins, muchos vienes hechos con el propio COMPASS y los podemos importar directamente de sus librerías.

Aparte de estos 7 puntos hay muchas mas cosas que se pueden hacer con SASS. Si tenéis cualquier duda, la podéis poner en los comentarios. Aquí tenéis algunos enlaces de referencia:

-Guía básica de SASS

-Cómo instalar Compass