FizzBuzzをSCSSで書いてみた。
なぜそんなことをしたのか…
とある界隈でFizzBuzzで盛り上がっている時に「CSSでも出来るのでは?」と思い立ったので5分くらいでやってみた。 (CSSでFizzBuzzをやった後にググって答え合わせをしてたら、僕と同じ回答が見つからなかった…)
SCSS in FizzBuzz
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; } } }
解説
前提としてpugで空のliタグを100個並べており、各liタグの Before属性の content に1〜100の数値を与えてます。
先にBuzzの処理を書いた理由
After属性のcontentに'Buzz'を書くため、Beforeは空にする必要があった。
そして空処理をFizz
より先に書いてしまうと、FizzBuzz
の時にBuzz
だけになってしまう。
余談
:nth-child(15n)
だけは使ったら負けだと思った。
Nuxt.jsで自動的にベンダプレフィックスを付ける方法
環境
Nuxt.js : 2.4.3
手順
1.autoprefixer
を入れます。
$ yarn add -D autoprefixer or $ npm install --save-dev autoprefixer
2.ルート直下に.postcssrc
を追加します。
// .postcssrc { "modules": true, "plugins": { "autoprefixer": { "browsers": [ "last 2 version", "ie >= 11", "iOS >= 9.0", "Android >= 4.4" ] } } }
3.おわり🙌
なぜなのか
Nuxt.jsのデフォルトでpostcssが入っているから ja.nuxtjs.org
2018年を振り返る
2018年を振り返る
1月
とても寒かった。
2月
特になし。
3月
新潟グラムのスタッフやっていた。 www.facebook.com
翌日は酒の陣。
4月
桜を撮った。
思い立って午後休んで撮りに行った桜。補正めちゃくちゃ適当に頑張った。 pic.twitter.com/fHgY530uC4
— べじ (@wtnb_j) April 13, 2018
5月
特になし。
6月
特になし。
7月
40度近い熱を出し、胃腸炎食中毒で一週間苦しむ。
思った以上にダメだった pic.twitter.com/uXo07t2GsN
— べじ (@wtnb_j) July 2, 2018
しばらく自炊を躊躇うぐらい料理ができなくなった。
8月
クソ暑かった。
100年越えられなかった記録を平然と抜いてしまう今年の夏。 pic.twitter.com/QldBSFaCuK
— べじ (@wtnb_j) August 23, 2018
9月
2年以上前に作ったアプリが何故かバズった。
10月
よく飲んでいた。
地元らしい。とても良い pic.twitter.com/lI8c209fWV
— べじ (@wtnb_j) October 1, 2018
うまぁい(語彙力 pic.twitter.com/RK8yD3CAXz
— べじ (@wtnb_j) October 12, 2018
11月
社で開いた Tech Night で、CSSのネタを話しました。 watercelldev.hatenablog.jp
スライドはこちら。 speakerdeck.com
12月
来年はアウトプット頑張る💪(˘ω˘💪)
と、決めたのでこの記事を書いていた。