For each loop is similar to a for loop in SassScript.
To write a for each loop, you need to use @each rule.
Using @each rule you can go through each element from a list and evaluate a particular style.
Syntax
@each $var in $list {
...
}
Each time the for each loop go through the element and executes a code, it creates a new selector as per the rule.
Example
$widths: 10px, 50px;
@each $width in $widths {
.img-#{$width} {
width: $size;
}
}
The code above compiled to this CSS:
.img-10px {
width: 10px;
}
.img-50px {
width: 50px;
}
examples forEach loop sass
