セットアップの手順をまとめておきます。

そもそもなぜSASSなのか

#

素のCSSは、ページ数が少し増えただけで散らかり始めます。SASSなら変数・ネスト・ミックスイン・関数が使えるので、色や共通のレイアウト定義をあちこちにコピペせず、一箇所にまとめられます。そしてHugoユーザーにとって一番うれしいのは、Hugo PipesがSCSSをそのままコンパイルしてくれること。別のビルドツールもウォッチャースクリプトも要りません。

作業中に開いておくと便利なページはこの2つです。

• SASSのドキュメント
• HugoのSCSS/SASSサポートのドキュメント

セットアップ

#

1. assetsディレクトリを用意する

#

Hugoはプロジェクトのルートにあるassetsフォルダを見に行くので、そこに作成（または移動）します。resourcesフォルダの中に置きたい場合は、config.tomlでHugoに場所を教えてあげます。

assetDir = "resources/assets"

2. sassフォルダを作る

#

assetsの中にsassというフォルダを作ります。SCSSファイルはここに置きます。

3. エントリーポイントを追加する

#

sassフォルダの中にmain.scssを作成します。Hugoがコンパイルするのはこのファイルなので、動作確認を兼ねて少しSCSSを書いておきましょう。

// assets/sass/main.scss

// 変数
$primary-color: #3498db;

// ミックスイン
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// スタイル
body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
}

h1 {
  @include center;
  color: white;
}

4. テンプレートに組み込む

#

head.htmlパーシャルで、コンパイル済みスタイルシートを読み込んでminifyします。

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

ここのファイル名が、実際のエントリーポイント（main.scss）と一致しているかだけ確認してください。

スタイルの分割

#

サイトが育ってきたら、SCSSをパーシャルに分割してmain.scssからインポートします。

// assets/sass/_variables.scss
$primary-color: #3498db;

// assets/sass/_mixins.scss
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// assets/sass/main.scss
@import "variables";
@import "mixins";

body {
  background-color: $primary-color;
}

h1 {
  @include center;
  color: white;
}

本当にこれだけです。4ステップで、あとはビルドのたびにHugoがスタイルを再コンパイルしてくれます。アセットパイプラインと格闘する覚悟で臨んだのに、拍子抜けするほどあっさり動きました。