Gatsby Starter Blogで作ったブログのデザインをカスタマイズするために、Sassを利用する環境を整えた。

Sassとは

CSSは死ぬほど書いてきたけど、このブログのデザインを作るにあたってSassを使うことにした。 死ぬほど書いてきたCSSに優先度とか何やらで死ぬほどストレスを受けてきたにもかかわらず Sassは使ったことがないので、今更ながら言葉から勉強した。

参考サイト: SassとSASSとSCSSの違いについて | UX MILK

SASSとSCSSでは後者の方が主流らしい。 あとは好みとかプロジェクトの方針とかなのだろうけど、 俺はSCSSの方が好みなのでこちらを使用することにした。 決して長いものに巻かれたわけではない。

Dart Sass

多少話が逸れるけど、現在はDart Sassという実装があるらしい。 2020年現在ではまだあまり普及してないっぽいが、一部の構文が多少変わってる程度のようだし、 何よりSassの公式でそっちを推奨してるので、ナウでヤングな俺はこちらを使うことにした。

よって、以降はDart Sassを使う前提で設定を行う。

必要なパッケージの導入

以下のコマンドで必要なパッケージを導入する。

npm install node-sass gatsby-plugin-sass

Dart Sassを利用するために以下も導入する。

npm install --save-dev sass

ちなみにnode-sass(LibSass)はgatsby-plugin-sassに必要なので Dart Sassを使用する場合でも導入する。

gatsby-config.jsの設定

gatsby-config.jsに、以下のように記述する。

• pluginsにgatsby-plugin-sassを追加
• gatsby-plugin-sassのoptionsにDart Sassを使用する設定を追加

module.exports = {
  // 略
  plugins: [
    // 略
    {      resolve: `gatsby-plugin-sass`,      options: {        implementation: require("sass"),      },    },  ],

使用

実際に使ってみる。

グローバルスタイルの適用

試しに、以下のようなスタイルを用意する。

@use "base/variables";

body {
  background: variables.$main_color;

  h1 {
    background: variables.$header_color;
  }
}

$main_color: yellow;
$header_color: red;

これをgatsby-browser.jsとかで読み込む。

import "./src/styles/theme.scss"

こうすることで、サイト全体のデザインを’00年代初期のウェブサイトを彷彿させる毒々しい色合いにすることができた。

CSS Module

Gatsbyでは標準でCSS Moduleを利用してCSSの適用範囲をスコープさせることができるので、 Sassでの利用方法も確認しておく。

CSS Moduleを利用するためにはまず、拡張子を.module.scssにしてSCSSファイルを作成する。

$index_color: green;

.index {
  background: $index_color;
}

これを以下のように特定のページから読み込んで利用する。

// 略
import Style from "../styles/index.module.scss"
const BlogIndex = ({ data, location }) => {
  // 略
  return (
    <header>
      <h2 className={Style.index}>  // 略

これで特定のページだけにスタイルを適用したりすることができる。