jairogarcíarincón

15/06/2021
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
En este apartado introduciremos las directivas heredadas de CSS puro y las estructuras de control, básicas para gestionar el comportamiento de las reglas en distintos ámbitos y también incluidas dentro de las at-rules :
- Condicionales (@if y @else)
- Bucles (@each, @for y @while)
- Directivas heredadas (@namespace, @font-face, @media, @support)
La directiva @if permite comprobar si un bloque es evaluado o no, y como en cualquier otro lenguaje, opcionalmente puede incorporar la directiva @else o la directiva @elseif.
La sintaxis es del tipo @if <expression> { ... }.
SCSS
Sass
CSS
La directiva @each permite recorrer una lista y emitir estilos o evaluar código para cada uno de sus elementos. La sintaxis será de tipo @each <variable> in <expresión> { ... }.
SCSS
Sass
CSS
La directiva @for permite contar de un número superior a otro inferior (o viceversa) y realizar una acción en cada pasada. La sintaxis será de tipo @for <variable> from <expresión> to <expresión> { ... } si queremos excluir el valor final, o bien @for <variable> from <expresión> through <expresión> { ... } si queremos incluirlo.
SCSS
Sass
CSS
La directiva @while evalúa una expresión y ejecuta acciones mientras sea cierta. La sintaxis será de tipo @while <expresión> { ... }.
SCSS
Sass
Nota: Como en cualquier otro lenguaje, para evitar bucles infinitos y porque además son más rápidas, es mejor utilizar @for o @each frente a @while.
Sass/SCSS permiten utilizar las directivas que ya eran parte de CSS, si bien para respetar la compatibilidad y evitar generar conflictos, debemos utilizarlas siguiendo la sintaxis @<name> { ... } o bien @<name> <value> { ... }, según el caso:
SCSS
Sass
CSS
Publicado el 29 de Mayo de 2023
csscss3sassscsslesspreprocesadores