El control de flujo en Sass permite la ejecución condicional de código y la repetición de bloques de código, haciendo tu CSS más dinámico y eficiente. Sass introduce directivas como @if, @else if, @else, @for, @each, y @while que añaden lógica condicional y bucles a tus hojas de estilo.

Sentencias Condicionales

Sass permite el uso de sentencias condicionales, lo que facilita la aplicación de estilos dependiendo de ciertas condiciones.

Directiva @if

La directiva @if permite aplicar estilos de forma condicional:

scss

Directivas @else if y @else

Para manejar múltiples condiciones, puedes utilizar @else if y @else:

scss

Bucles en Sass

Los bucles permiten repetir bloques de código, lo que es útil para generar estilos de manera dinámicas basados en un conjunto de datos.

Directiva @for

La directiva @for ejecuta un bloque de código un número específico de veces. Hay dos formas de utilizar @for: desde(arbitrary) hasta(exclusive) y desde(include) hasta(include).

Ejemplo con from...through:

scss

Resultado en CSS:

css

Directiva @each

La directiva @each permite iterar sobre listas o mapas, lo que es especialmente útil para gestionar conjuntos de datos relacionados.

Ejemplo con Lista:

scss

Resultado en CSS:

css

Ejemplo con Mapa:

scss

Resultado en CSS:

css

Directiva @while

La directiva @while ejecuta un bloque de código mientras una condición sea verdadera:

scss

Resultado en CSS:

css

Ejemplo Completo

Combinar control de flujo y bucles permite crear estilos dinámicos y sofisticados. Aquí hay un ejemplo completo utilizando varias de estas directivas:

scss

Conclusión

El control de flujo en Sass permite introducir lógica condicional y bucles en tus hojas de estilo, proporcionando un nivel adicional de flexibilidad y dinamismo. Con estas poderosas herramientas, puedes crear CSS más eficiente y fácil de mantener. En el próximo capítulo, exploraremos la gestión de colores en Sass y cómo puedes manipular y optimizar los colores en tus hojas de estilo.