jairogarcíarincón

Configuración

4.72K

15/06/2021

Contenidos

Introducción

El último paso que nos quedaría para poder utilizar SASS o SCSS en nuestro proyecto sería configurar (o comprobar dicha configuración) en nuestro IDE para que precompile dichos archivos.

Dado que en este curso vamos a utilizar Visual Studio Code, tan solo debemos ajustar las opciones del plug-in instalado. No obstante, se detallan también las instrucciones para el uso mediante Node.js y la consola de comandos.

Configuración en Visual Studio Code

En este caso, una vez instalado el plug-in, tan solo debemos abrir Visual Studio Code y, desde la barra de estado (View > Appearance > Show Status Bar) y, con un archivo con extensión *.sass o *.scss, hacer clic en el botón Watch Sass, de modo que empiece a procesar los cambios en nuestro archivo y volcarlos en otro de css puro que tendrá el mismo nombre que el original, pero con extensión *.css:

Para dejar de procesar, tan solo debemos volver a pulsar el botón.

Otra opción para conseguir el mismo resultado, es abrir una Command Palette (View > Command Palette... o Ctrl + Shft + P) y teclear Live Sass: Watch Sass para empezar a procesar en tiempo real, o Live Sass: Stop Watching Sass para dejar de hacerlo.

Por último, también es posible teclear Live Sass: Compile Sass - Without Watch Mode, de modo que solo haga la compilación en ese momento (primero se debe guardar el archivo).

Configuración desde la Consola (modo stand-alone)

Por supuesto, es posible utilizar SASS y SCSS desde cualquier entorno de desarrollo sin necesidad de configurarlo, utilizando para ello comandos de Consola:

Además, es posible utilizar en la expresión una serie de opciones o flags que producirán diferentes resultados, siendo las más comunes:

--indented: indica que el fichero de entrada está indentado (Sass).
--no-indented: indica lo contrario, que no está indentado (SCSS).
--load-path=ruta-hasta-el-archivo: útil para cargar imports.
--style=expanded: genera un fichero de salida estándar (por defecto).
--style=compressed: genera un fichero de salida comprimido.
--no-charset: no emite el charset del fichero. Útil si utilizamos emojis o cualquier otro carácter no ASCII.
--update: solo se compilarán las hojas cuyas dependencias hayan cambiado recientemente y además generará un mensaje con ellas. Se diferencia de --watch en que solo lo hace una vez.
--no-source-map: no genera el mapa fuente, que es un fichero que permite en navegadores como Chrome y Firefox inspeccionar e incluso editar el archivo Sass o SCSS original.
--embed-sources: incluye el archivo Sass o SCSS original dentro del mapa fuente.
--embed-source-map: incluye el mapa fuente dentro del CSS generado en vez de crear un archivo aparte.
--poll: usado en combinación con --watch hace que se actualice la salida incluso más rápido.
--stop-on-error: para cuando encuentra un error y lo muestra. Muy útil si estamos compilando varios archivos a la vez.
--interactive: permite escribir expresiones SassScript en la consola y ver los resultados.
--color: emite colores en la ventana de la Consola para mejorar la visualización.
--no-unicode: solo se emitirán a la Consola caracteres ASCII.
--quiet: no emite warnings a la Consola durante la compilación.
--trace: emite a la Consola el stack trace completo de los errores que encuentre.
--help: muestra un resumen de la documentación en la Consola. Útil si no recordamos alguno de estos flags.

Referencias

Publicado el 29 de Mayo de 2023

csscss3sassscsslesspreprocesadores