jairogarcíarincón

Directivas de control y heredadas


1.38K

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 Junio de 2022

csscss3sassscsslesspreprocesadores