Memorandum

お米の国でちょっと頑張っているフロントエンドデザイナの備忘録。

FizzBuzzをSCSSで書いてみた。

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

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

 

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)だけは使ったら負けだと思った。

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月

桜を撮った。

5月

特になし。

6月

特になし。

7月

40度近い熱を出し、腸炎食中毒で一週間苦しむ。

しばらく自炊を躊躇うぐらい料理ができなくなった。

8月

クソ暑かった。

9月

2年以上前に作ったアプリが何故かバズった。

f:id:wtnb-j:20181231093114p:plain

10月

よく飲んでいた。

11月

社で開いた Tech Night で、CSSのネタを話しました。 watercelldev.hatenablog.jp

スライドはこちら。 speakerdeck.com

12月

来年はアウトプット頑張る💪(˘ω˘💪)
と、決めたのでこの記事を書いていた。