jairogarcíarincó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)
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
140-directivas-de-control-y-heredadas.scss
Sass
141-directivas-de-control-y-heredadas.sass
CSS
142-directivas-de-control-y-heredadas.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
143-directivas-de-control-y-heredadas.scss
Sass
144-directivas-de-control-y-heredadas.sass
CSS
145-directivas-de-control-y-heredadas.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
146-directivas-de-control-y-heredadas.scss
Sass
147-directivas-de-control-y-heredadas.sass
CSS
148-directivas-de-control-y-heredadas.css
La directiva @while evalúa una expresión y ejecuta acciones mientras sea cierta. La sintaxis será de tipo @while <expresión> { ... }.
SCSS
149-directivas-de-control-y-heredadas.scss
Sass
150-directivas-de-control-y-heredadas.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
151-directivas-de-control-y-heredadas.scss
Sass
152-directivas-de-control-y-heredadas.sass
CSS
153-directivas-de-control-y-heredadas.css
Publicado el 21 de Noviembre de 2024
csscss3sassscsslesspreprocesadores