Vigila y Compila Sass en Cinco Rápidos Pasos

Sass es quizá el más popular de los pre-procesadores CSS; durante años nos ha ayudado a escribir CSS limpio, reutilizable y modular. En éste rápido tutorial, iré directo al punto importante y explicaré cómo compilar Sass a CSS usando la línea de comandos.

1. Instala Node.js

Para compilar Sass viá la línea de comandos, primero necesitamos instalar node.js. Descárgalo del sitio oficial nodejs.org, abre el paquete y sigue el asistente de instalación.

2. Inicializa NPM

NPM es el Gestor de Paquetes de Node para JavaScript. NPM facilita instalar y desinstalar paquetes de terceros. Para incializar un proyecto en Sass con NPM, abre tu terminal y CD (cambia de directorio) a tu directorio de proyecto.

Una vez en el directorio correcto, ejecuta el comando npm init. Se te pedirá responder varias preguntas sobre el proyecto, después de las cuales NPM generará un archivo package.json en tu directorio.

3. Instala Node-Sass

Node-sass es un paquete NPM que compila Sass a CSS (lo cual también hace muy rápido). Para instalar node-sass ejecuta el siguiente comando en tu terminal: npm install node-sass

4. Escribe el Comando Node-sass

Todo está listo para escribir un pequeño script para compilar Sass. Abre el archivo package.json en un editor de código. Verás algo como ésto:

1

{

2

  "name": "sass-tutorial",

3

  "version": "1.0.0",

4

  "description": "",

5

  "main": "index.js",

6

  "scripts": {

7

    "test": "echo \"Error: no test specified\" && exit 1"

8

  },

9

  "author": "",

10

  "license": "ISC"

11

}

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

1

"scripts": {

2

  "test": "echo \"Error: no test specified\" && exit 1",

3

  "scss": "node-sass -watch scss -o css"

4

}

Recorramos ésta línea palabra por palabra.

1. node-sass: Se refiere al paquete node-sass.
2. -watch: Un modificador opcional que significa "vigila todos los archivos .scss en el directorio scss/ y vuelve a compilarlos cada vez que haya un cambio."
3. scss: El nombre del directorio donde ponemos todos nuestros archivos .scss.
4. -o css: El directorio de salida para nuestro CSS compilado.

Cuando ejecutamos éste script vigilará cada archivo .scss en el directorio scss/, luego guarda el css compilado en el directorio css/ cada vez que cambiamos un archivo .scss.

5. Ejecuta el Script

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

¡Y voila! Estamos vigilando y compilando SASS.

Consejos Rápidos para Sass

Sigue alerta para más consejos rápidos para Sass; ¡Una completa colección viene en camino!