Mira y compila Sass en cinco pasos rápidos

Lo que vas a crear

Sass es quizás el más popular de los preprocesadores CSS; Durante años nos ha ayudado a escribir CSS limpio, reutilizable y modular. En este rápido tutorial, iré directo a las cosas que son importantes y explicaré cómo compilar Sass en CSS usando la línea de comandos.

1. Instale Node.js

Para compilar Sass a través de la línea de comandos, primero necesitamos instalar node.js. Descárguelo del sitio web oficial nodejs.org, abra el paquete y siga el asistente.

2. Inicializa NPM

NPM es el administrador de paquetes de nodo para JavaScript. NPM facilita la instalación y desinstalación de paquetes de terceros. Para inicializar un proyecto Sass con NPM, abra su terminal y CD (cambiar directorio) a su carpeta de proyecto.

Navegando a la carpeta del proyecto Sass

Una vez en la carpeta correcta, ejecute el comando npm init. Se le pedirá que responda varias preguntas sobre el proyecto, después de lo cual NPM generará una paquete.json archivo en su carpeta.

3. Instale Node-Sass

Node-sass es un paquete NPM que compila Sass a CSS (que también lo hace muy rápidamente). Para instalar node-sass, ejecute el siguiente comando en su terminal: npm instalar node-sass

4. Escribe el comando Node-sass 

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

"name": "sass-tutorial", "version": "1.0.0", "description": "," main ":" index.js "," scripts ": " test ":" echo \ "Error: no se ha especificado ninguna prueba \" && exit 1 "," autor ":" "," licencia ":" ISC " 

En el guiones sección agregar un scss comando, bajo el prueba comando, como se muestra a continuación:

"scripts": "prueba": "echo \" Error: no se especificó la prueba \ "&& exit 1", "scss": "node-sass --watch scss -o css"

Vayamos por esta línea palabra por palabra.. 

1. nodo-sass: Se refiere al paquete node-sass.
2. --reloj: Una bandera opcional que significa "ver todo .scss archivos en el scss / Carpeta y recompilalas cada vez que hay un cambio ".
3. scss: El nombre de la carpeta donde colocamos todos nuestros archivos .scss..
4. -o css: La carpeta de salida para nuestro CSS compilado.

Cuando ejecutemos este script, verá cada .scss archivo en el scss / carpeta, luego guardar el css compilado en css / carpeta cada vez que cambiamos una .scss expediente.

5. Ejecutar el script

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

¡Y voilá! Estamos viendo y compilando SASS..

Consejos rápidos de Sass

Estén atentos para más consejos rápidos de Sass; Hay toda una colección en camino.!