Fizz-Buzz Test with Sass

Written on October 27, 2014

The Fizz-Buzz test is a small test designed to filter job candidates. It’s simple enough that applicants should be able to do it on the spot:

Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.

As a front-end developer I immediately went with a JavaScript implementation but afterwards wondered if I could get a little creative with it. “Can I do this with Sass and a single DOM element?” The answer: yes!

$content: "";

@for $i from 1 through 100 {

  @if $i % 15 == 0 {
    $content: append($content," FizzBuzz\a");
  } @elseif $i % 3 == 0 {
    $content: append($content," Fizz\a");
  } @elseif $i % 5 == 0 {
    $content: append($content," Buzz\a");
  } @else {
    $content: append($content," #{$i}\a");
  }

  @if $i == 100 {
    .buzz-ur-butt:before {
      content: $content;
      white-space: pre;
    }
  }
}

Checkout the Codepen if you want to play around with it. I recommend implementing Fizz-Buzz in your language of choice!