jairogarcíarincón

Directivas de control y heredadas

2.52K
Directivas de control y heredadas
15/06/2021

Contenidos

  1. Introducción a los pre-procesadores
  2. Instalación
  3. Configuración
  4. Evaluación Bloque 1
  5. Solución Evaluación Bloque 1
  6. Sintaxis y reglas
  7. Variables
  8. Operadores
  9. Tipos de datos
  10. Evaluación Bloque 2
  11. Solución Evaluación Bloque 2
  12. Ejercicio 1
  13. Solución Ejercicio 1
  14. Ejercicio 2
  15. Solución Ejercicio 2
  16. Funciones
  17. Interpolado
  18. Reglas y directivas básicas
  19. Directivas de control y heredadas
  20. Evaluación Bloque 3
  21. Solución Evaluación Bloque 3
  22. Ejercicio 3
  23. Solución Ejercicio 3
  24. Ejercicio 4
  25. Solución Ejercicio 4
  26. Ejercicio 5
  27. Solución Ejercicio 5
  28. Ejercicio 6
  29. Solución Ejercicio 6
  30. Ejercicio 7
  31. Solución Ejercicio 7

Introducción

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)



Condicionales (@if y @else)

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




Bucles (@each, @for y @while)

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.


Directivas heredadas (@namespace, @font-face, @media, @support)

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




Referencias

Publicado el 29 de Mayo de 2023

csscss3sassscsslesspreprocesadores

Anterior
Siguiente