Sass, Syntactically Awesome StyleSheets

Por Tamara Osona
Junior Open Source Consultant de OpenSistemas

¿Cómo te ayudaría el uso de variables en las hojas de estilo? ¿Por qué en CSS tenemos que repetir líneas de código una y otra vez? logo-sassCuando estás en un proyecto grande con muchos elementos y clases, te haces estas preguntas y buscas alternativas. Ahí descubrí los preprocesadores de CSS, que cubren en gran parte estas necesidades.

Sass es un lenguaje de script que es traducido a CSS, inicialmente diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum. Empecé a utilizar lo básico de Sass hace un par de años, cuando estaba de prácticas, y poco a poco empecé a ver la cantidad de ventajas que tiene y lo simple que es.

Por ejemplo, puedes crear una variable si necesitas un valor más de una vez, o mixins, como conjunto de variables y propiedades, permite el uso de operaciones, bucles… Otra ventaja es el anidado, que permite a un selector heredar los estilos de otro sin duplicar las propiedades CSS, como también el hecho de poder separar los estilos en varios archivos y que Sass luego los unifique en una única hoja de estilo, permitiendo encapsular todo en un mismo CSS ayudando a reducir el número de conexiones y mejorar la performance.

Sass es muy sencillo, tiene una sintaxis prácticamente igual al CSS corriente, la única diferencia es que ahora nuestros archivos pasarán a tener la extensión .scss y habrá que compilarlos a través un programa, como Compass, para obtener el archivo .css final.

¿Qué es todo esto? Estos son algunos ejemplos:

Variables: se pueden crear diversas variables y funciones útiles como color, dimensiones…

variables-sass

Anidación: evita la repetición de selectores y propiedades anidándolos unos dentro de otros.

anidacion-sass

Mixins: serían “variables” que permiten utilizar trozos enteros de CSS, propiedades o selectores.

mixin-sass

Selector de herencia: Se puede utilizar un selector para heredar los estilos de otro sin duplicar las propiedades CSS.

herencia-sass

Cómo instalar Sass y Compass

Sass y Compass están escritos en Ruby, así que es necesario tener instalado el intérprete de Ruby, que se puede descargar en rubyinstaller.org.

Para instalar Compass escribe el comando gem install compass en la terminal de Windows o sudo gem install compass en Linux/Mac.

Una vez instalado, crea una carpeta ‘SASS’ y dentro de ella, el proyecto con compass create. Dentro de ‘SASS’ aparecen dos carpetas, sass y stylesheets, los archivos de la carpeta sass serán los que editarás.

Y para terminar, en la consola, escribe compass compile /SASS, y se generará el .css en la carpeta stylesheets.

Sass y Compass en WordPress

Y para los acostumbrados a trabajar con WordPress ¡Sass también es para nosotros!

Configuración

logo-wordpressDentro del tema elegido para tu web, crea el proyecto Compass: create compass. Como Sass guarda los archivos .css generados en el directorio stylesheets, hay que sobreescribir el archivo style.css que viene por defecto en el directorio raíz (del tema):

– Borra las hojas de estilo.

– Edita el archivo config.rb: busca la línea donde se indica el path y déjalo en blanco: css_dir = “”.

– Renombra el archivo screen.scss: entra en la carpeta SASS y cambia de nombre al archivo screen.scss por style.scss.

¡Hecho! Cada vez que quieras compilar los archivos, solo tendrás que ejecutar compass watch en el directorio del tema.

Si no lo conocéis, os recomiendo echar un vistazo a la página oficial http://sass-lang.com/ para terminar de convenceros, si no, existen otros preprocesadores similares que quizás no sean tan completos, pero según tus necesidades también son buenas alternativas, como Stylus o también el muy conocido, Less.