Formas de compilar mi código en SASS

En la entrada anterior aprendimos un poco de SASS, sus utilidades y por qué deberías usarlo en tus proyectos.

Ahora les voy a explicar algo que es muy común preguntar: ¿Cómo compilo mi código SASS?, ya que al final nos quedamos con un archivo .scss que el navegador no entiende y necesitamos convertirlo a .css que sí entienda el navegador.

Para empezar, explicare la forma más sencilla de hacerlo, para personas que no quieran tener mucho que configurar.

Live SASS Compiler

Live Sass es una extensión la Visual Studio Code que nos ayuda a compilar nuestro código SASS en tiempo real, si quieres ahorrarte tiempo esta es la mejor opción.

Características principales:

• Compilación en vivo de SASS y SCSS.
• Ubicación de archivo de salida personalizable.
• Control desde la barra de estado en VSC.

El primer paso es siempre instalar la extension desde VSC, después se nos habilitara en el status bar un nuevo elemento llamado Watch Sass.

Cuando veamos en el status bar ese elemento tendremos ya todo para poder compilar un archivo .sccc, lo único que debemos hacer es crearlo, para este ejemplo utilizare el siguiente archivo de prueba.

Mi archivo sass tiene el nombre de landing.scc, al dar click en el status bar Watch Sass automáticamente la extensión entenderá que hacer y nos generara un archivo de salida, con el mismo nombre solo que con la extension .css.

El output en Visual Studio Code nos mostrara siempre el status de la compilación de nuestro documento.

De esta forma es que podemos compilar nuestros archivos sass en tiempo real, ademas si utilizamos otra herramienta como lo es live server, podemos crear un flujo de trabajo muy rápido, en esta entrada hablamos sobre live server y lo que nos ofrece.

Programas de terceros

Ademas de poder compilar sass desde el mismo editor de código, también podríamos descargar una herramienta externa para que se encargue de hacer el watch de nuestros archivos.

Existen muchos pero en esta guía te dejaré los que eh utilizado y me han funcionado

Koala (MAC, Windows, Linux) – Gratis

Koala es una aplicación o compilador de código abierto y gratuito basado en GUI para compilar SASS y otros preprocesadores como Less, Compass y CoffeeScript. 

Esta herramienta está disponible para descargar para Windows, Mac o Linux y puede ejecutarse allí.

Prepros (MAC, Windows, Linux) -Pago

Prepros es elegible para compilar casi todos los lenguajes de preprocesamiento como Sass, Less, Stylus, Cssnext, Jade / Pug, Markdown, Slim, CoffeeScript y más. 

Prepros recarga tu navegador automáticamente cada vez que guarda un archivo en el editor de código.

Sassmeister – Editor en línea

Sassmeister es una web para compilar SASS. De hecho, es uno de los mejores sitios para practicar SASS, con la ayuda de Sassmeister puedes ver los poderes de SASS en línea sin tener que instalar una herramienta en tu PC.

Además, puede elegir la versión y sintaxis de SASS, estilo de salida CSS, extensiones, sintaxis HTML, etc.

Linea de comandos

Para poder instalar sass de manera global en nuestro PC es necesario tener instalado nodejs y npm. Puedes revisar mi entrada sobre npm como instalar ambas herramientas.

Una vez teniendo esta instalación, procedemos a instalar sass desde npm con el siguiente comando:

npm install -g sass

Una vez teniendo instalado sass en nuestro equipo ahora debemos indicarle desde la linea de comandos que archivo vamos a estar observando para que lo compile y obtengamos de salida un archivo con la extension css.

sass --watch input.scss output.css

O en su defecto también podemos observar una carpeta donde estén nuestros archivos sass utilizando las rutas de entrada y salida separadas por dos puntos (:), puedes ver un ejemplo a continuación:

sass --watch app/sass:public/stylesheets

Puedes tambien revisar el paso a paso desde la documentación oficial de sass.