Instalar Sass en Windows con ejemplos

Sass es un preprocesador de CSS3 que logra que maquetar sea muy divertido. Muchos proyectos cuentan con un solo fichero CSS que contiene todos los estilos de la Web, en consecuencia el mantenimiento es mucho más difícil y se pierde mucho tiempo en corregir errores que no deberían costar fixear.
Sass aparece como solución a este problema permitiéndonos modularizar nuestros ficheros CSS y luego comprimirlos en uno solo, añadiendo también variables, reglas y funciones que nos van a permitir modularizar nuestros estilos y lograr profesionalidad.
Mostraré como configurarlo para Windows, que básicamente es lo mismo que para cualquier sistema operativo, pero con algunos pasos más a seguir.

Requisitos
Al usar Windows debemos bajarnos Ruby, SASS se instala desde consola y necesitamos descargarnos el entorno de Ruby para hacerlo.
Podrás descargar Ruby desde este enlace: Descargar Ruby para Windows.

Instalación
Luego de descargar Ruby e instalarlo, debemos abrir la consola. Para ello podemos o bien entrar a la consola clásica de windows o abrir la consola con Ruby, que nos aparecerá en nuestra carpeta de programas:

Con la consola abierta debemos poner el siguiente comando para instalar SASS

De la mano de SASS aparece Compass, un framework que nos brinda código CSS común para nuestros proyectos. No nos tendremos que preocupar de añadir mixins para bordes redondeados ni de los layouts de nuestra página, así como de nuestro reset entre otras cosas.
Para instalarlo debemos escribir el siguiente comando:

Configuración básica
Con Sass instalado, crearemos dos ficheros, uno llamado style.scss y el otro llamado style.css. Por ser un ejemplo básico los pondremos en una misma carpeta, es decir, en el mismo sitio a ambos.
Style.scss es el fichero donde pondremos nuestro código escrito con Sass, y style.css es el fichero con nuestro código Sass formateado. Para resumir, nuestros ficheros scss los usamos para modularizar nuestros estilos, y el resultado del formateo de nuestros estilos estará en el fichero css.

Escribiremos el siguiente comando en nuestra consola:

Con este comando, que debemos ejecutar en la carpeta donde está nuestro fichero .scss, indicamos que los cambios que hagamos el nuestro fichero style.scss serán observados y automáticamente enviados al fichero style.css, por lo que solo nos queda utilizar Sass y comprobar como se actualizan nuestros ficheros css al guardar cambios.

Configuración avanzada
Como mencionamos antes, el propósito de utilizar Sass está relacionado con modularizar nuestros estilos, hacerlos más amenos a la lectura, mantenerlos de manera más sencilla y que todo esté más organizado.
Vamos a crear una estructura de carpetas como la siguiente:

En la carpeta partial pondremos los ficheros de reset y nuestros mixins genéricos.
En la carpeta modules pondremos los ficheros que correspondan a cada módulo de nuestra web.
En la carpeta vendow pondremos los ficheros que correspondan a estilos de plugins que hayamos instalado en nuestra aplicación.

Debemos incluir en nuestro fichero style.scss los mencionados arriba. Con Sass podemos importar estos ficheros utilizando Import.

Haciendo un watch con la consola, cualquier cambio que hagamos en nuestros ficheros .scss hará que se actualice automáticamente nuestro style.css, logrando una modularización enorme en nuestros proyectos.

Conclusión
En el ejemplo vimos la potencia que podemos tener en nuestros estilos si utilizamos correctamente Sass. Esto es solo la configuración, no hemos mencionado para nada los mixins, por decir un ejemplo, lo haremos en un futuro artículo.
Como he dicho anteriormente, las Start-ups cada vez son más grandes y con más personas en el equipo. Es muy importante tener un código limpio y mantenible para que cualquiera que se una no tenga problemas en entender nuestro código.