jairogarcíarincón

Contenidos
- Introducción a los pre-procesadores
- Instalación
- Configuración
- Evaluación Bloque 1
- Solución Evaluación Bloque 1
- Sintaxis y reglas
- Variables
- Operadores
- Tipos de datos
- Evaluación Bloque 2
- Solución Evaluación Bloque 2
- Ejercicio 1
- Solución Ejercicio 1
- Ejercicio 2
- Solución Ejercicio 2
- Funciones
- Interpolado
- Reglas y directivas básicas
- Directivas de control y heredadas
- Evaluación Bloque 3
- Solución Evaluación Bloque 3
- Ejercicio 3
- Solución Ejercicio 3
- Ejercicio 4
- Solución Ejercicio 4
- Ejercicio 5
- Solución Ejercicio 5
- Ejercicio 6
- Solución Ejercicio 6
- Ejercicio 7
- Solución Ejercicio 7
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.
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).
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.
- Visual Studio Marketplace
- https://sass-lang.com/install
- http://lesscss.org
- https://sass-lang.com/documentation
Publicado el 29 de Mayo de 2023
csscss3sassscsslesspreprocesadores