How can I take advantage of Sass, for example, in rendering FizzBuzz?

Question

I managed to write FizzBuzz in pure CSS as kind of personal Hello World to learn how to write stylesheets. I'd like to do the same with Sass, but I'm not sure how I could make use of Sass syntax or semantics to improve on this.

Currently, I've got a .html file and .scss file that together render FizzBuzz, but the .scss file is still pure CSS code. How could I make it more concise or expressive by using Sass extensions?

Example:

body { counter-reset: i; }

div { counter-increment: i; }
div:after { content: "" counter(i); }

div:nth-child(3n) { visibility: hidden; }
div:nth-child(3n):after { visibility: visible; content: "Fizz"; }

div:nth-child(5n) { visibility: hidden; }
div:nth-child(5n):after { visibility: visible; content: "Buzz"; }

div:nth-child(15n) { visibility: hidden; }
div:nth-child(15n):after { visibility: visible; content: "FizzBuzz"; }

Source:

https://github.com/mcandre/mcandre/tree/master/sass

score 0 · Accepted Answer · answered Aug 02 '13 at 19:33

Most people start with the nesting, so you might have something like (Scss syntax, btw):

div {
  counter-increment: i;

  &:nth-child(3n) {
    visibility: hidden;

    &:after {
      visibility: visible;
      content: "Fizz";
    }
  }
// Repeat for remainder :nth-child declarations
}

The & symbol means it's still the "parent" element (ie - &:nth-child(3n) = div:nth-child(3n)).

This particular example doesn't provide a lot of room for turning it into Sass and displaying a lot of the benefit of doing so. Some of the power of Sass resides in things like variables and mixins (one of the big uses is dealing with vendor prefixes and being able to split the source into different files and having it all compile to one and minified).

Thanks! Does LESS offer similar syntax for nested selectors? — apennebaker, Aug 02 '13 at 19:46
@apennebaker - I don't use LESS, but my understanding is yes, it does. In fact, LESS and Sass are very similar in regards to features (Sass has a thing called "placeholders" which LESS doesn't have, but that's about it). The major difference between the two is the language they use to compile the source. — Shauna, Aug 02 '13 at 19:48

score 0 · Answer 2 · answered Aug 02 '13 at 21:24

Another possibility (as Shauna mentioned) is to use a @while loop with a @mixin to automate things:

SCSS

@mixin fizzBuzz($count) {
    @if $count % 5 == 0  and $count % 3 == 0 {
      @extend .buzzDiv;
      &:after {
       content: "FizzBuzz";
      }
    }
    @else if $count % 3 == 0 {
      @extend .buzzDiv;
      &:after {
        content: "Fizz";
      }
    }
    @else if $count % 5 == 0 {
      @extend .buzzDiv;
      &:after {
        content: "Buzz";
      }
    }
    @else {
      &:after {
        content:"#{$counter}"
      }
    }
}

// reduce our css bloat
.buzzDiv {
  visibility: hidden;
  &:after {
    visibility:visible;
  }
}


$counter: 1;

@while $counter <= 100 {
  div.no#{$counter} {
    @include fizzBuzz($counter)
  }
  $counter: $counter + 1;
}

Codepen

There are probably more elegant ways of writing the control structure (i'm still repeating myself a bit here), but this works allows you to save a few keystrokes as it "scales".

More info on SASS control directives here.

How can I take advantage of Sass, for example, in rendering FizzBuzz?

2 Answers2