jairogarcíarincón

Configuración

42.4K
Configuración
08/05/2024

Contenidos

  1. Introducción a los pre-procesadores
  2. Instalación
  3. Configuración
  4. Sintaxis y reglas
  5. Variables
  6. Operadores
  7. Tipos de datos
  8. Ejercicio 1
  9. Funciones
  10. Interpolado
  11. Ejercicio 2
  12. Reglas y directivas básicas
  13. Directivas de control y heredadas
  14. Ejercicio 3

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:

Watch Sass


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:

# para convertir un fichero sass/scss en css en un momento dado
cd /ruta-hasta-mi-proyecto
sass sass/input.scss:sass/output.css
sass scss/input.scss:scss/output.css

# para convertir varios ficheros sass/scss en css en un momento dado
cd /ruta-hasta-mi-proyecto
sass sass/input.scss:sass/output.css sass/input2.scss:sass/output2.css
sass scss/input.scss:scss/output.css scss/input2.scss:scss/output2.css

# para convertir un fichero sass/scss en css cada vez que haya cambios
cd /ruta-hasta-mi-proyecto
sass --watch sass/input.scss:sass/output.css
sass --watch scss/input.scss:scss/output.css

# para convertir todos los ficheros de la carpeta sass/scss en css cada vez que haya cambios
sass --watch sass:css
sass --watch scss:css


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 03 de Diciembre de 2024

csscss3sassscsslesspreprocesadores

Anterior
Siguiente