How to create many class names with dynamic values using a Sass loop (.scss)

Опубликовано: 17 Январь 2025
на канале: Omar Shishani

254

We look at how to use a Sass "for" loop to write 100 class names for us, each with it's own dynamic value! For example:

.dp-w-24 {
width: 24%;
}

Here is the actual finished .scss function:

@for $i from 1 through 10 {
.dp-w-#{$i * 10} {
width: #{$i * 10}#{'%'};
}
}