ここまで、サイトデザインの調整は static/css/style.css という生のCSSファイルを直接編集することによって行ってきました。
しかし、実際のWeb制作現場や本格的なテーマ開発においては、生のCSSではなく SCSS (Sass) というメタ言語（プリプロセッサ）技術が広く標準的に使われています。

SCSSを使うと、CSSの記述を「入れ子（ネスト）」構造にできたり、色やサイズを「変数」として使い回せるなど、コードの記述量が減り劇的に見やすく管理しやすくなります。
Hugoには 「Hugo Pipes」 という強力なアセット処理パイプライン機能が内蔵されており、外部のビルドツール（Node.js環境など）をわざわざ導入・設定しなくても、SCSSを自動的に標準のCSSへと変換（コンパイル）してくれます。

今回は、これまで使ってきた既存のCSSファイルを、よりモダンで管理しやすいSCSS環境へとアップグレードする手順を解説します！

1. フォルダの移動

まず、ファイルの置き場所が変わります。
Hugo Pipesで処理するファイルは assets フォルダに入れます。

  1. themes/my-tutorial-theme/assets/scss/ フォルダを作成します。
  2. themes/my-tutorial-theme/static/css/style.css をコピーして、
    themes/my-tutorial-theme/assets/scss/style.scss にリネームして配置します。

※ static のファイルは「そのまま」配信されますが、assets のファイルは「加工してから」配信されます。

【注意】エラーが出る場合
もし error: type <nil> not supported というエラーが出たら、Hugoが新しい assets フォルダを認識できていない可能性があります。
一度 hugo server を再起動してください。Hugo Pipesはサーバー起動時に新しいフォルダ構成をスキャンします。

参考: assets フォルダの優先順位

実は、assets フォルダは「テーマの中」だけでなく「プロジェクトのルート（一番上の階層）」にも作ることができます。
Hugoは以下の順番でファイルを探します。

  1. プロジェクトルートの assets/ （最優先）
  2. テーマの中の themes/my-tutorial-theme/assets/

どう使い分けるの？

  • テーマ開発者（あなた）: 基本的に テーマの中 (themes/my-tutorial-theme/assets/) に置きます。
  • テーマ利用者: テーマのデザインを少しだけ変えたい場合、プロジェクトルート に同名のファイルを置くことで、テーマのファイルを「上書き」できます。

今回はテーマ自体を自作しているのでテーマの中に置きますが、既存のテーマを使う場合は「ルートの assets に置いて上書きする」というテクニックをよく使います。

2. SCSSの書き方（入れ子構造）

.scss ファイルでは、CSSを入れ子（ネスト）にして書くことができます。
例えば、これまでこう書いていたコードが…

/* 従来のCSS */
header {
    background: #333;
}
header h1 {
    color: white;
}
header a {
    text-decoration: none;
}

こう書けるようになります！

/* SCSS */
header {
    background: #333;
    
    h1 {
        color: white;
    }
    
    a {
        text-decoration: none;
    }
}

親要素 (header) の中に子要素 (h1, a) を書けるので、関係性がひと目で分かりますね。

3. baseof.html の修正

テンプレート側で、このファイルを読み込む処理を書き換えます。
layouts/baseof.html を開いてください。

<!-- layouts/baseof.html -->
<head>
    ...
    <!-- 変更前 -->
    <!-- {{ $style := "css/style.css" }} -->
    <!-- <link rel="stylesheet" href="{{ $style | relURL }}"> -->

    <!-- 変更後: Hugo Pipesで処理する -->
    {{ $style := resources.Get "scss/style.scss" | toCSS | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
</head>

何をしているの？

  1. resources.Get: assets フォルダからファイルを取得。
  2. toCSS: SCSSをCSSに変換。
  3. minify: 改行や空白を削除してファイルサイズを軽量化。
  4. fingerprint: ファイル名にハッシュ値を付けて、キャッシュ問題を解決（例: style.min.abcdef...css）。

Hugo Pipesでモダンなフロントエンド開発環境を構築しよう

SCSS（入れ子構造や変数の活用）を導入することで、特にCSSファイルが長大になってきた際に見通しが良くなり、コードの修正・管理が劇的に楽になります。

さらにメリットとして、Hugo Pipesの強力なアセット処理（toCSS, minify, fingerprint）を通すことで、面倒な外部のビルドツール（WebpackやVite, Gulpなど）を用意・学習しなくても、サイトを公開した際「軽量で高速かつキャッシュの更新も自動化された」最適なスタイルシート配信環境が整います。
ぜひテーマ制作の早い段階でHugo Pipesを用いたSCSS環境に移行しておきましょう！✨