Articles
Introducción a SASS/SCSS
Iteración en SASS

Iteración en SASS

Este artículo explica cómo manejar la iteración en SASS.

Explicaremos cómo realizar iteraciones en SASS paso a paso, utilizando ejemplos de código reales.

YouTube Video

Iteración en SASS

La iteración en SASS ayuda a evitar la duplicación de código y te permite crear estilos flexibles y reutilizables.

Razones para usar la iteración en SASS

Hay varias ventajas al usar la iteración, tales como las siguientes:.

  • La reutilización del código mejora, facilitando la generación de estilos con patrones similares.
  • La mantenibilidad se mejora, haciendo que sea más fácil cambiar los estilos de una vez.
  • Reduce los errores también.

Por ejemplo, puedes generar estilos para botones con diferentes colores o componentes con múltiples tamaños de una sola vez.

Sintaxis utilizada para la iteración en SASS

La sintaxis principal utilizada para la iteración en SASS es la siguiente:.

  • Usando @for, puedes realizar iteraciones sobre un rango especificado de números.
  • Usando @each, puedes iterar sobre listas o mapas en tus bucles.
  • Usando @while, puedes iterar hasta que se cumpla una condición determinada.

Iteración usando @for

@for ejecuta procesos repetitivos en base a un rango especificado de números.

Sintaxis 

1/*
2@for $i from <start> to <end> {
3  ...
4}
5
6@for $i from <start> through <end> {
7  ...
8}
9*/
  • Especifica los valores inicial y final para <start> y <end>. Usar to excluye el valor final, mientras que through lo incluye.

Ejemplo

El siguiente código genera automáticamente clases con bordes que aumentan su grosor en 1px cada una.

1@for $i from 1 through 5 {
2  .border-#{$i} {
3    border-width: #{$i}px;
4  }
5}
  • Este código genera automáticamente clases para grosores de borde que aumentan en 1px cada una. La directiva @for se usa aquí para iterar desde 1 hasta 5.

CSS generado 

 1.border-1 {
 2  border-width: 1px;
 3}
 4.border-2 {
 5  border-width: 2px;
 6}
 7.border-3 {
 8  border-width: 3px;
 9}
10.border-4 {
11  border-width: 4px;
12}
13.border-5 {
14  border-width: 5px;
15}
  • Las clases desde .border-1 hasta .border-5 se generarán secuencialmente, con cada borde aumentando 1px de grosor.

Iteración usando @each

@each realiza bucles utilizando listas o mapas. Es útil cuando quieres generar clases con patrones de manera eficiente.

Sintaxis 

1/*
2@each $item in <list> {
3  ...
4}
5*/

Ejemplo 1: Usando una lista

El código a continuación genera múltiples clases de color de texto.

1@each $color in ("red", "blue", "green") {
2  .text-#{$color} {
3    color: #{$color};
4  }
5}
  • Este código genera automáticamente clases de color de texto para cada color en la lista. La directiva @each se utiliza para procesar cada valor de la lista de forma secuencial.

CSS generado 

1.text-red {
2  color: red;
3}
4.text-blue {
5  color: blue;
6}
7.text-green {
8  color: green;
9}
  • Cuando el archivo SASS se compila a CSS, se generan clases como .text-red, .text-blue y .text-green para cada color en la lista.

Ejemplo 2: Usando un mapa

Usar un mapa te permite manejar pares de claves y valores. En el siguiente ejemplo, los colores de fondo de los botones están definidos utilizando un mapa.

 1$colors: (
 2  primary: #3498db,
 3  success: #2ecc71,
 4  danger: #e74c3c
 5);
 6
 7@each $name, $hex in $colors {
 8  .bg-#{$name} {
 9    background-color: #{$hex};
10  }
11}

CSS generado 

1.bg-primary {
2  background-color: #3498db;
3}
4.bg-success {
5  background-color: #2ecc71;
6}
7.bg-danger {
8  background-color: #e74c3c;
9}
  • Cuando el archivo SASS se compila a CSS, se generan clases como .bg-primary, .bg-success y .bg-danger para cada clave en el mapa.

Iteración usando @while

@while continúa el bucle mientras la condición sea verdadera.

Sintaxis 

1/*
2@while <condition> {
3  ...
4}
5*/

Ejemplo

Por ejemplo, si deseas incrementar el tamaño de la fuente paso a paso, puedes escribirlo de la siguiente manera:.

1$i: 1;
2
3@while $i <= 5 {
4  .font-#{$i} {
5    font-size: #{$i}rem;
6  }
7  $i: $i + 1;
8}
  • Puedes usar la directiva @while para procesos iterativos al aumentar tamaños de fuente en pasos. Al usar la variable $i, las clases se generan automáticamente para valores de 1 a 5.

CSS generado 

 1.font-1 {
 2  font-size: 1rem;
 3}
 4.font-2 {
 5  font-size: 2rem;
 6}
 7.font-3 {
 8  font-size: 3rem;
 9}
10.font-4 {
11  font-size: 4rem;
12}
13.font-5 {
14  font-size: 5rem;
15}
  • Cuando el archivo SASS se compila a CSS, las clases con tamaños de fuente que aumentan de 1rem a 5rem se generan automáticamente.

Ejemplo avanzado: Combinando iteración y anidamiento

Combinar la iteración con la característica de anidamiento de SASS permite generar estilos aún más avanzados.

Ejemplo

A continuación, un ejemplo donde se definen juntos los colores de fondo y hover para los botones.

 1@use "sass:color";
 2
 3$colors: (
 4  primary: #3498db,
 5  success: #2ecc71,
 6  danger: #e74c3c
 7);
 8
 9@each $name, $hex in $colors {
10  .btn-#{$name} {
11    background-color: $hex;
12    color: white;
13
14    &:hover {
15      background-color: color.scale($hex, $lightness: -10%);
16    }
17  }
18}
  • Al combinar la iteración y el anidamiento de SASS, puedes generar los colores de fondo y los colores de hover de los botones de una sola vez. Para cada color en el mapa, se crea una clase .btn- y se define el estilo :hover usando anidamiento.

CSS generado 

 1.btn-primary {
 2  background-color: #3498db;
 3  color: white;
 4}
 5.btn-primary:hover {
 6  background-color: #2980b9;
 7}
 8.btn-success {
 9  background-color: #2ecc71;
10  color: white;
11}
12.btn-success:hover {
13  background-color: #27ae60;
14}
15.btn-danger {
16  background-color: #e74c3c;
17  color: white;
18}
19.btn-danger:hover {
20  background-color: #c0392b;
21}
  • Cuando conviertes el archivo SASS a CSS, el color de fondo y el color al pasar el cursor para cada botón se generan automáticamente, y los estilos :hover se definen colectivamente usando anidamiento.

Puntos a tener en cuenta al usar la iteración

Ten en cuenta los siguientes puntos al usar la iteración para escribir código más eficiente y legible.

  1. Evita anidamientos excesivamente profundos El anidamiento excesivo reduce la legibilidad, así que mantenlo al mínimo necesario.

  2. Considera los impactos en el rendimiento Si se generan demasiadas clases mediante iteración, tu CSS puede volverse innecesariamente grande.

  3. Usa nombres de variables apropiados Para variables como $i o $item, usa nombres significativos para que tu código sea más fácil de entender.

Resumen

Utilizar la iteración en SASS permite un diseño de estilos eficiente y mantenible. En particular, elegir entre @for, @each y @while te permite generar CSS dinámico y flexible.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

La función `if` en SASS