このサイトのCSSが、いつの間にか長くて繰り返しだらけの1ファイルに育ってしまったので、ようやくSASSに移行しました。GoHugoでサイトを運用しているなら、15分の作業で、その後スタイルシートを触るたびに元が取れるタイプの改善です。
セットアップの手順をまとめておきます。
そもそもなぜSASSなのか#
素のCSSは、ページ数が少し増えただけで散らかり始めます。SASSなら変数・ネスト・ミックスイン・関数が使えるので、色や共通のレイアウト定義をあちこちにコピペせず、一箇所にまとめられます。そしてHugoユーザーにとって一番うれしいのは、Hugo PipesがSCSSをそのままコンパイルしてくれること。別のビルドツールもウォッチャースクリプトも要りません。
作業中に開いておくと便利なページはこの2つです。
セットアップ#
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がスタイルを再コンパイルしてくれます。アセットパイプラインと格闘する覚悟で臨んだのに、拍子抜けするほどあっさり動きました。