I want to write a sass mixin that outputs a certain class every 5 steps from 1 to 100. But I can't get the modulo operator to work somehow. No class is created at all.
Here is my code
@mixin flex_percentage($className) {
@for $i from 1 through 100 {
@if $i % 5 != 0 {
.#{$className}#{$i} {
width: $i * 1%;
}
}
}
}
@include flex_percentage(p);
I also tried $i mod(5)
but then it outputs all 100 classes.
I would like to have a output like
.p5 {
width: 5%;
}
.p10 {
width: 10%;
}
.p15 {
width: 15%;
}
The @if $i % 5 != 0 {
should be like this:
@if $i % 5 == 0 {
The difference is between !=
and ==
in the if
clause. Your original code was actually outputting every class except those that were multiples of 5. If we change it to ==
, then only those classes which are multiples of 5 are output.
Live example: http://sassmeister.com/gist/7550271
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With