f:id:namikuguri:20180221003502p:plain

namikuguri.github.io では CSS をそのまま書いてる。Sass などのプリプロセッサーを使っていない。

理由としては、

コンパイルの時間を待たなくていい
コンパイル後の CSS ファイルを想像しながら書かなくていい
ローカル環境いらずなのでどこからでも触れる（GitHub から直接編集できたりする）

1つ目は自分が短気だからかもしれない。1秒でも 0.5秒でも待たされるのは作業のリズムを崩されるから嫌で、書いた瞬間に Web ページには反映してほしい。ページをリロードしたときに表示が変わらなくて、「あれ、コンパイル待ちかな？」って思うのはもう飽きた。

2つ目に関してはたとえば以下のような場合、

.blockLink {
    &:hover {
        &__action {
            ...
        }
    }
}

&__action のコンパイル結果は .blockLink:hover__action になるが、Sass はこれに対してエラーを返さないので問題に気づくには DevTools で確認するしかない。単純に CSS だけで考えるとエラーの概念がそもそもないに等しいので気にしなくてもいいんだけど、普通に CSS 書いてればこんなミスはないと思うとやはり嫌だ。

3つ目は恩恵を得れる機会としては少ない。たまに外行く前に急いで書いた CSS プロパティがタイポしてた、ってときにはスマホから修正できて便利。あとは会社 PC とプライベート PC を分けて使ってる人とかはいいかもしれない。

とかなんとかで、脱プリプロセッサー最高ーーー！って思ってたけど、会社で Sass 書いてるとネストで BEM ったり Mixin 使えたりいい感じに（たとえばメディアクエリに）変数使えたり、あーーーやっぱプリプロセッサーいるかもーーー！ってなってる。

Sass と SCSS の違いがよくわからん。