Compila Sass en cinco sencillos pasos

Sass es el preprocesador de CSS más conocido desde hace ya unos cuantos años, el cual nos permite escribir CSS de manera limpia, reutilizable y de forma modular. En este tutorial os explicaré cómo compilar Sass en cinco sencillos pasos utilizando línea de comandos. ¿Te interesa el tema? ¡Pues vamos allá!

Instalar Node.js

Para compilar Sass a través de línea de comandos, primero tenemos que instalar Node.js. Así que, descarga la librería desde la web oficial de Node,js en nodejs.org, abre el paquete y sigue el asistente.

Inicializa NPM

NPM es el Node Package Manager para Javascript. NPM hace que sea sencillo instalar y desinstalar paquetes de terceros. Para inicializar un proyecto Sass con NPM, abre el terminal y haz un CD (change directory) a la carpeta de tu proyecto.

Una vez en la carpeta correcta, ejecuta el comando npm init. Se te solicitará responder varias preguntas acerca del proyecto. Después, NPM generará un archivo package.json en tu carpeta.

Instalar Node-Sass

Node-sass es un paquete NPM que compila Sass a CSS (y lo hace a la velocidad del rayo, vamos). Para instalar Node-sass, ejecuta el siguiente comando en tu terminal: npm install node-sass

Escribe Node-sass

Ya está todo listo para escribir un pequeño script para compilar Sass. Abre el fichero package.json en un editor de texto y verás algo como esto:

{
  "name": "sass-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

En la sección de scripts añade un comando scss, debajo del comando test, como puedes ver abajo:

"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "scss": "node-sass --watch scss -o css"
}

¿No entiendes nada? Vamos a verlo línea a línea.

node-sass: Hace referencia al paquete node-sass
-watch: Un flag opcional que significa ver todos los ficheros .scss en la carpeta scss/ y recompilar cada vez que haya un cambio
scss: El nombre de la carpeta donde se alojan todos los ficheros scss
-o css: La carpeta donde se alojarán los CSS compilados

Cuando ejecutes estos comandos, se guardará cada fichero scss en la carpeta scss, y cada vez que realices un cambio, se generará un fichero css nuevo que se alojará en la carpeta css.

Ejecutar el script

Para ejecutar nuestro script de una línea, necesitamos ejecutar el siguiente comando en el terminal: npm run scss