Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sass Mixin Modulo not working correctly

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%;
}
like image 524
Sebsemillia Avatar asked Nov 19 '13 15:11

Sebsemillia


1 Answers

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

like image 156
KatieK Avatar answered Oct 14 '22 09:10

KatieK