Aprende a usar Sass


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

En el artículo que publicamos recientemente sobre Sass, veíamos qué era y qué sintaxis tenía. Descubríamos sus principales caracterísiticas, que lo hacen destacable en la comunidad de desarrolladores y lo prefieren frente otros preprocesadores CSS, como Less o Stylus. Ahora que ya lo conocemos mejor, a continuación veremos cómo instalar Sass y empezar a utilizarlo.

Existen dos alternativas básicas para usar Sass:

  1. Preprocesar con herramientas de interfaz gráfica, por ejemplo Prepros, CodeKit o Scout-App. Con esto, trabajar es más sencillo y podemos prescindir de la línea de comandos, aunque es necesario utilizar un programa en concreto y con la desventaja de que sea de pago.
  2. Usar la línea de comandos para preprocesar. Es la que utilizan la mayoría de desarrolladores. No requiere ningún tipo de licencia, el terminal se encuentra en nuestro sistema operativo y nos deja personalizar todo el comportamiento del preprocesador.

Instalar Sass

Su instalación dependerá del sistema operativo que estemos utilizando, aunque lo primero que tenemos que hacer es alojar Ruby en nuestro ordenador, ya que el compilador de Sass está escrito en este lenguaje de programación. ¿Dónde puedes conseguir Ruby en función de tu sistema operativo?

  • Windows. El instalador para Windows se encuentra aquí.
  • Linux. A través del gestor de paquetes de la distribución que tengas instalada, apt-get, yum, etc.
  • Mac. Viene ya instalada y no necesitarás nada más.

Cuando lo tengamos instalado, tendremos el comando gem, que instala paquetes basados en Ruby. Lo usaremos para instalar Sass, pero hay diferencias entre los distintos sistemas operativos, como ejemplificamos a continuación:

  • Windows. Abrimos un terminal, por ejemplo el que viene por defecto, con “cmd” y lanzamos el comando.
    gem install sass
  • Linux. Usamos el terminal y tecleamos el comando.
    sudo gem install sass --no-user-install
  • Mac OS X. Utilizarás generalmente sudo. Ojo con los permisos.
    sudo gem install sass

    Una vez instalado Sass, comprobaremos si está disponible con el comando:

    sass -v
    

    Si nos devuelve la versión, lo tendremos instalado.

Compilar archivos de Sass a CSS

Para compilar el código Sass y convertirlo a CSS estándar, te debes situar con el terminal en la carpeta donde esté el archivo con el código SCSS. A continuación, lanzas el siguiente comando (archivo origen-archivo destino):

sass ej.scss ej-compilado.css

Observarás que después de su ejecución,  crea un archivo adicional llamado ej-compilado.css.map y que nos sirve para que el navegador nos ayude a la hora de depurar.

Compilar Sass de manera automática con un watcher

Compilar Sass es muy rápido, pero ¿qué pasa si cambias tu código cada poco? Por suerte, podemos automatizar el proceso con un watcher, que no es más que el encargado de vigilar tu código cada vez que se guarda y que se compila al instante. De este modo, ahorras tiempo entre compilación y compilación.

Hay que indicar también que el watcher nos permite observar un único archivo o todos los de una carpeta.

Vigilar las modificaciones de un archivo en concreto

Se consigue aplicando la opción –watch, con un archivo origen y otro destino. Como este ejemplo:

sass --watch origen.scss destino.css

Vigilar todos los archivos de una carpeta

Indicando la carpeta origen y destino, como en el siguiente ejemplo, podremos vigilar todos los archivos de una carpeta.

sass --watch carpetaorigen:carpetadestino

Nuestra sugerencia es crear dos carpetas. Una que se llame “sass” en la que pondrás el código fuente con archivos de extensión “.scss” y otra que puedes llamar “css”, donde pondremos el  código compilado.

Echa un vistazo a este esquema:

Con el siguiente comando, lanzarás el watcher.

sass --watch sass:css

Creado el código SCSS en la carpeta sass, los archivos compilados se irán almacenando en la carpeta de destino. La estructura quedaría de la siguiente manera:

Watcher también podría evitar la compilación de ciertos archivos, simplemente nombrándolos al principio con un guión bajo. Algo como _variables.css.

Usar los archivos de código generado

Como el código SCSS no es compatible con los navegadores, tendremos que enlazar el generado en el index.html de esta forma:

<link rel="stylesheet" href="/blogcss/estilo.css">

Si todo es correcto, verás cómo funciona perfectamente.

Con lo que hemos visto, ya puedes iniciarte en el uso de Sass. Hemos creado un entorno de desarrollo amigable que permite una compilación de manera automática. Tan solo queda practicar  el lenguaje para sacarle el máximo provecho en nuestros desarrollos. Y recuerda que en la página oficial de este preprocesador encontrarás una útil guía.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+