SASS, una manera diferente de trabajar con CSS. Para los que están acostumbrados a programar en lenguajes de alto nivel, les resultará mucho más cercano y versátil que la edición de CSS tradicional. Su principal reclamo es la simplicidad y la legibilidad del código que generamos.

Compass, sin embargo, es la herramienta que nos permitirá generar en tiempo real nuestras CSS a partir de los archivos en SASS, de una manera totalmente transparente.

¿Qué es SASS?

SASS es un meta-lenguaje mediante el cuál podremos describir los estilos de nuestros documentos de una manera más clara y estructurada. Lo que se hace después es interpretar ese meta código y generar una CSS válida con los valores declarados en nuestros archivos SASS.

Primero vamos a intentar familiarizarnos con la sintaxis de SASS.

	#container
		width: 1000px
		height: 100%

	#header
		width: 100%
		height: 50px
		color: #171717

Como podéis ver en ejemplo anterior no hay apertura ni cierres de selectores, tampoco hay indicación de fin de sentencia con ;. Este lenguaje al igual que Python, entre otros, se basa en la tabulación del código. Interpreta el final de una sentencia mediante el salto de línea y la herencia según la tabulación. Con lo que el resultado que obtendríamos de este código en CSS sería el siguiente.

	#container { width: 1000px; height: 100%; }

	#container #header { width:100%; height:50px; color:#171717; }

¿Por qué usar SASS?

Hay claramente dos motivos que pueden hacer decantarnos por empezar a utilizar SASS. Por un lado está la ganancia en legibilidad. Es mucho más legible que cualquier documento CSS, las herencias y jerarquías son claras y se ven de un vistazo, evitando tener que indagar en el html para saber quién hereda de quién. Algo que nos será de gran utilidad sobretodo si el código va a ser editado por más de una persona o a la hora de retomar un proyecto para un rediseño. Por otro lado, tenemos funcionalidades extras que pueden hacer nuestra labor mucho más dinámica a la hora de maquetar.

A continuación vamos a enumerar algunas de esas funcionalidades para que podáis valorar sus posibilidades con mayor precisión.

Entre sus muchas ventajas se encuentra la declaración de variables. Estas variables pueden ser utilizadas a lo largo del documento de tal manera que no tengamos que acordarnos de la propiedad CSS que representan pero sí la obtengamos en el archivo resultante. La declaración se hace de la siguiente manera.

	!min_width = 500px
	!main_color = #d2d2d2

Gracias a esas declaraciones a partir de ahora en todo lugar en el que utilicemos estas variables SASS las sustituirá por el valor que les hemos asignado. Muy útil para propiedades que se repiten en la CSS y que han de estar unificadas, de tal manera que si por ejemplo queremos cambiar el color de fuente de un determinado número de elementos simplemente tengamos que cambiar la variable asociada al color de fuente de dichos elementos. Para utilizar estas variables, sólo hay que recordar poner un símbolo de igual (=) en la sentencia para que SASS sepa que lo que vas a introducir a continuación es una variable. Además estas variables nos permiten hacer operaciones aritméticas.

	#footer
		width = !min_width + 200px
		color = !main_color

Con esto obtendríamos una CSS como la que sigue.

	#footer { width: 700px; color: #d2d2d2; }

La parte más novedosa y potente de este meta-lenguaje son los Mixins (funciones) que permiten realizar declaraciones al vuelo de propiedades en base a una serie de argumentos. Las declaraciones se hacen de la siguiente manera.

	=round_corners(!size=5px)
		border-radius= !size
		-moz-border-radius= !size
		-webkit-border-radius= !size

Los argumentos son opcionales y es posible declarar valores por defecto. En nuestro caso nos generará bordes redondeados del tamaño que le enviemos en la llamada, si no mandamos ningún valor los bordes serán de 5px. Para hacer la llamada pondremos un símbolo "+", el nombre de la función y entre paréntesis el valor de los argumentos.

	#bloq_rounded
		+round_corners(3px)
		width: 150px
		height: 150px

La CSS correspondiente a la declaración anterior sería esta.

	#bloq_roudend{ width: 150px; height: 150px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

Estas son algunas de las funcionalidades más interesantes de SASS, si queréis conocer más sobre su uso, como por ejemplo "¿cómo hacer un import de otro archivo SASS?", os recomiendo visitar la página oficial de SASS.

¿Cómo puedo integrarlo en mi proyecto?

Gracias a Compass la integración con tu proyecto va a ser muy sencilla. Compass es un Framework basado en Ruby que se encargará de ir comprobando tus archivos SASS para ir generando las diferentes CSS. Los cambios que realices en SASS afectarán automáticamente a las CSS en cuanto los guardes.

Para instalarlo será necesario tener Ruby en el sistema, si no lo tenéis, esté es el momento de instalarlo. Suponiendo que ya lo tenéis instalado (en Mac OSX lo tendréis instalado si habéis puesto las developer tools), vamos a bajarnos todo lo que nos va a hacer falta mediante las gemas de Ruby. Primero nos bajaremos haml y después nos bajaremos Compass. Es importante que se haga en este orden, ya que haml es una dependencia de Compass. Abrimos una terminal y metemos los siguientes comandos.

	sudo gem install haml
	sudo gem install compass

¡Ya tenemos Compass instalado! Pero aún no hemos acabado, ya que ahora hay que hacerlo funcionar con nuestros proyectos. Según las necesidades de cada uno Compass tiene configuraciones muy dispares, os recomiendo que os leáis el help y su documentación.

Vamos a suponer que queréis hacer las CSS de una web cualquiera usando SASS. Los pasos a seguir serán los siguientes. Generar en el directorio en el que queremos tener nuestras CSS una carpeta llamada /src. Es fundamental generar bien esta carpeta porque si no Compass no podrá generar nuestras CSS. Ahora ya podemos arrancar Compass, para ello abrimos una terminal, nos situamos en el directorio que contiene la carpeta anteriormente citada e introducimos este comando.

	compass --watch

Lo que hemos conseguido con este comando es mantener a Compass a la escucha de cambios en la carpeta src. Ahora para crear nuestras CSS, dentro de la carpeta /src generaremos tantos archivos SASS nos hagan falta, en ese momento Compass se encargará de crear un archivo CSS, asociado a cada uno de esos archivos, con el mismo nombre dentro de una carpeta que generará llamada por defecto /stylesheets (podremos cambiarla utilizando los parámetros de Compass). Imaginemos que creamos un main.sass dentro de la carpeta /src con el siguiente código.

	#container
		margin: 0 auto
		width: 1000px

En el momento en el que guardemos los cambios Compass nos creará un archivo main.css dentro de /stylesheets que contendrá el siguiente código.

	#container{ margin: 0 auto; width: 1000px; }

A partir de ahora podremos crear nuestros archivos en SASS sin preocuparnos de las CSS, ya que Compass estará constantemente realizando los cambios por nosotros. Sólo habrá que vigilar que no cometemos errores de indentación ni de introducción de propiedades inexistentes en CSS. Es recomendable tener a la vista la terminal en la que hemos arrancado Compass para ver los posibles errores.

Con esto os podéis hacer una idea de cómo funciona SASS y las posibilidades que ofrece. Ahora mismo le estoy dando una oportunidad y no me está decepcionando para nada. Si tuviera que poner un pero, sería a los selectores que genera, si eres estricto y pones toda la jerarquía en SASS la CSS resultante tendrá problablemente selectores kilométricos que no son estrictamente necesarios. Ahora bien, seguro que así no tenemos problemas de herencias o sobreescritura de propiedades inesperadas. Por ello, si os ha parecido interesante os recomiendo que le deis una oportunidad, aunque sea para probarlo.