sass Loops and Conditons While loop
Example
The @while directive will loop over a block of code until the condition specified becomes false. In the following example, this loop will run until $font-size <= 18 while incrementing the value for $font-size by 2.
$font-size: 12;
@while $font-size <= 18 {
.font-size-#{$font-size} {
font-size: ($font-size * 1px);
}
$font-size: $font-size + 2;
}
Output of above code
.font-size-12 {
font-size: 12px;
}
.font-size-14 {
font-size: 14px;
}
.font-size-16 {
font-size: 16px;
}
.font-size-18 {
font-size: 18px;
}
