The Spirit Bear

Written by Gray Gilmore

I make websites for a living. I love CSS and building simple and modular stylesheets. Somewhere along the way I also turned into a Ruby developer. Life comes at you fast I guess. You can read my resume to learn about my journey so far.

You can find me as @graygilmore on several platforms:

Good ol' fashion email works, too:

You can subscribe to this blog via RSS: XML, JSON

Fizz-Buzz Test with Sass

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!