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
140-directivas-de-control-y-heredadas.scss
Sass
141-directivas-de-control-y-heredadas.sass
CSS
142-directivas-de-control-y-heredadas.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
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.
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
151-directivas-de-control-y-heredadas.scss
Sass
152-directivas-de-control-y-heredadas.sass
CSS
153-directivas-de-control-y-heredadas.css
Referencias