Looping through a list

PHOTO EMBED

Wed Sep 11 2024 00:18:40 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #scss #loop #list #fonts

$font-sizes: 12px 14px 16px 18px;

@for $i from 1 through length($font-sizes) {
  .text-#{$i} {
    font-size: nth($font-sizes, $i);  // Retrieves the corresponding font size from the list
  }
}


//generates
.text-1 {
  font-size: 12px;
}

.text-2 {
  font-size: 14px;
}

.text-3 {
  font-size: 16px;
}

.text-4 {
  font-size: 18px;
}
content_copyCOPY