割り込み – SCSS 対応！

2022-06-11Hack Util Apps 開発記録

前回は Head や Header の仕様などについてお話ししたと思いますが、実はその間に CSS から SCSS に移行しているんですね。

今回はちょっと軽く SCSS について語ろうと思います。

初回から：

SCSS

CSS を書いてると必ずぶち当たる悩みがあると思います。そう、それは、

＿人人人人人人人人人人人人人人人人人人人＿
＞　なぜネストができないんだああああ！　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

ということです。

CSS はネストができません。コード書いてるとこういう風な無駄が不可避です。

footer {
...
}

footer .footer-top {
...
}

footer .footer-bottom {
...
}

footer .footer-bottom .copyright {
...
}

多分、「こんなに無駄な footer を書くのはもういやだ！」という方は多いと思います。

私もそうでした。

ですが、なんということでしょう。 SCSS を使うことで上みたいなゴミコード（笑）がこんなにきれいになります。

footer {
  ...
  
  .footer-top {
  ...
  }
  
  .footer-bottom {
  ...
    
    .copyright {
    ...
    }
  }
}

これは見やすいし、保守性も高いです。なので、僕は SCSS にしました。

ただ、普通に SCSS を使っていると、大きな弱点があります。

そう、コンパイルをしなければいけないのです。ブラウザは SCSS に対応していないので当然のことです。

つまり、一行編集しただけでもわざわざコンパイルをしなければいけないということなのです。

ですが、 Next.js は、前に言ったとおりに、ファイルを編集すれば勝手にコンパイルをしてくれます。 TypeScript も SCSS も同じなんです。

Next.js を使っているのなら SCSS は絶対使えといいたくなるほどに Next.js はこういう保守性をよくするものと相性がいいと思います。

やはり React.js のコンポーネント指向（？）を受け継いできたものですね。

これからは SCSS の恩恵を受けながらスムーズにデザインをしていきました。

次回予告

今回は割り込みという感じでシリーズ全体とは多分しゃべり方も量も違かったと思います。あくまでも割込みですからね。

では、次からメインに戻ります。

最後まで読んでいただきありがとうございました。