FizzBuzzをSCSSで書いてみた。

なぜそんなことをしたのか…

とある界隈でFizzBuzzで盛り上がっている時に「CSSでも出来るのでは？」と思い立ったので5分くらいでやってみた。 （CSSでFizzBuzzをやった後にググって答え合わせをしてたら、僕と同じ回答が見つからなかった…）

SCSS in FizzBuzz

CodePen

codepen.io

SCSS 

ol {
  list-style: none;
  li {
    counter-increment: FizzBuzz;
    &:before {
      content: counter(FizzBuzz);
    }
    // 5の倍数のbeforeを空に
    &:nth-child(5n):before {
      content: '';
    }
    // 5の倍数のafterにBuzzを
    &:nth-child(5n):after {
      content: 'Buzz';
      color: blue;
    }
    // 3の倍数のbeforeにFizzを
    &:nth-child(3n):before {
      content: 'Fizz';
      color: red;
    }
  } 
}

解説

前提としてpugで空のliタグを100個並べており、各liタグの Before属性の content に1〜100の数値を与えてます。

先にBuzzの処理を書いた理由

After属性のcontentに'Buzz'を書くため、Beforeは空にする必要があった。
そして空処理をFizzより先に書いてしまうと、FizzBuzzの時にBuzzだけになってしまう。

余談

:nth-child(15n)だけは使ったら負けだと思った。