Fizzbuzz SASS (SCSS)

fizzbuzz

// To generate the html, I use an expansion tool like Emmett and run:
// ul#fuzzbuzz>li$num*100

@mixin fizzbuzz-content($num) {
    @if $num % 15 == 0 {
        content: 'FizzBuzz';
    }
    @elseif $num % 5 == 0 {
        content: 'Buzz';
    }
    @elseif $num % 3 == 0 {
        content: 'Fizz\n';
    }
    @else {
        content: $num + ' ';
    }
}
@mixin fizzbuzz-loop($max) {
    @for $num from 1 through $max {
        .fizzbuzz-#{$num}:after {
            display: block;
            padding: 5px;
            color: black;
            margin: 2px;
            @include fizzbuzz-content($num);
        }
    }
}
#fizzbuzz {
    @include fizzbuzz-loop(100);
}