FizzBuzzをSCSSで書いてみた。

2019年3月13日2019年9月29日

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

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

やってみた

See the Pen
FizzBazz in SCSS by べじ (@wtnb_j)
on CodePen.

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;
    }
  } 
}

解説

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

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

あとがき（余談）