¿Qué es Sass?
Si todavía hay algún despistado que no sabe de lo que estamos hablando, SASS es un metalenguaje para escribir hojas de estilo que nos ayudará a generar ficheros CSS más optimizados, incorporando mayor contenido semántico a nuestras hojas de estilo y permitiendo utilizar funcionalidades que normalmente encontraríamos en lenguajes de programación tradicionales, como el uso de variables, creación de funciones, estructuración de código en varios ficheros, etc. Sass no es una tecnología nueva, nació en el 2007 y ha ido ganando popularidad con el tiempo hasta convertirse en una herramienta imprescindible a la hora de construir proyectos web de medio o gran tamaño. Escrito en Ruby, consta de un compilador encargado de traducir nuestros ficheros en sintaxis Sass a CSS. A la hora de escribir nuestras hojas de estilo podremos hacer uso de dos sintaxis: SCSS (Sassy CSS) u Original Sass . El primero pretende asemejar la sintaxis Sass a la sintaxis CSS estándar, haciendo que cualquier fichero CSS sea sintácticamente válido a nivel de Sass. Por otra parte, Original SASS es la sintaxis original de Sass que elimina muchos de los elementos CSS que se consideran inncesarios como las llaves o los puntos y coma, obligando a estructurar nuestras reglas de cierta forma para que la semántica que aportan dichos elementos quede implícita en la estructura. Para que nos quede más claro podemos ver un ejemplo de ambas sintaxis: [one_third]
/* SCSS */ p{ width: 500px; color: #000; } |
[/one_third] [one_third_last]
/* Original SASS */ p width: 500px color: #000 |
[/one_third_last] Como podemos apreciar, SCSS es idéntico a CSS, pero Original Sass simplifica la sintaxis a base de obligar a seguir una estructura más estricta. Aunque la sintaxis original queda más limpia y se comprende mejor una vez que te acostumbras, normalmente se recomienda hacer uso de SCSS, especialmente en los inicios pues se tiene la ventaja de que realmente es CSS estándar ampliado con las mejoras ofrecidas por SASS. En este tutorial, los ejemplos se mostrarán usando SCSS.
Instalación de SASS
Para poder utilizar SASS necesitamos disponer del compilador que nos permita convertir nuestros ficheros en sintaxis SCSS a CSS, y para instalar dicho compilador debemos instalar previamente Ruby. Los usuarios de Windows podrán hacerlo fácilmente a través de http://rubyinstaller.org, los usuarios de Mac OS X ya lo llevan instalado de serie, y los usuarios de Linux podrán instalarlo con su gestor de paquetes preferido. Una vez instalado Ruby y su gestor de paquetes Ruby Gems, instalar Sass será tan sencillo como introducir esta línea en nuestra consola de comandos:
$ gem install sass |
Sencillo, ¿verdad? Para comprobar que funciona, podemos coger cualquier fichero css que tengamos y cambiar su extensión a scss para luego pasárselo como parámetro al comando sass:
$ mv test.css test.scss
$ sass test.scss
p {
width: 500px;
color: #000; } |
Como hemos comentado anteriormente, la sintaxis SCSS es una ampliación de la sintaxis CSS, por lo que cualquier contenido CSS también es contenido SCSS válido. En el ejemplo anterior, simplemente ha formateado la salida porque no hemos hecho uso de ningún uso específico de Sass. Si queremos que el contenido compilado se guarde en un fichero, se lo indicaremos como segundo parámetro:
> sass test.scss test.css |
Invocar este comando cada vez que modifiquemos el fichero .scss original para generar el código CSS es excesivamente tedioso. Por ese motivo, podremos hacer uso de la opción –watch del compilador, la cual monitorizará los cambios del fichero original y lo compilará automáticamente al fichero destino en caso de actualización:
> sass --watch test.scss:test.css |
De esta forma, podremos modificar el fichero test.scss desde nuestro editor preferido y cada vez que guardemos el fichero se compilará automáticamente a CSS. Como veremos en este tutorial, una de las recomendaciones a la hora de trabajar con Sass es segmentar nuestra maquetación CSS en varios ficheros, de forma que podamos hacerla lo más modular posible. Si vamos a hacer uso de un conjunto de ficheros .scss, en vez de monitorizar fichero a fichero será preferible monitorizar le directorio que los contiene. Normalmente se recomienda tener un directorio con los ficheros Sass y otro directorio con los ficheros compilados a CSS, para luego hacer uso de la opción –watch y así monitorizar todos los cambios que se produzcan en cualquiera de los ficheros situados en el directorio SCSS:
> sass --watch stylesheets/scss:stylesheets/css |
Herramientas Visuales
Si te da alergia la línea de comandos, o simplemente te atraen más las herramientas de escritorio, puedes hacer uso de herramientas visuales que también realizan la compilación automática de ficheros. Existen varias alternativas multiplataforma de pago como CodeKit o Compass App. Yo os recomiendo Scout, que es multiplataforma y además es gratuita.
Lo único que tendremos que crear un proyecto indicándole donde tenemos situados los fuentes y posteriormente indicarle el directorio donde alojaremos los ficheros fuente .scss y el directorio donde compilar. Una vez configurado, en la sección de «log» podremos ver la salida de las conversiones automáticas que realizará el programa.
Conclusiones
Realmente no hemos visto casi nada de Sass, únicamente hemos preparado el entorno y hemos visto las herramientas que podemos utilizar. En el siguiente artículo veremos la sintaxis Sass a fondo y explicaremos qué funcionalidades nos ofrece esta tecnología a la hora de crear nuestras hojas de estilo.
Deja una respuesta