簡単!便利!HugoでSass/Scssを使う方法!

  Hugo   ,




こんにちは! HugoでSass/Scssが使えるということを知り、せっかくなので使ってみることにしたAkiです!

Sass/Scssを簡単に説明すると、CSSをわかりやすく書けるようにした拡張言語といったところでしょうか。

実際に使ってみて、とても便利だったのでもっと早く導入しておけばよかったと思いました。

というわけで、今回はHugoでSass/Scssを使う方法です。

作業環境

  • Windows10
  • Hugo v0.53/extended

extendedバージョンの導入

HugoでSass/Scssを使う場合は、extended(拡張)バージョンを使う必要があります。

私はchocolateyを使っていないので、GitHubのページからhugo_extended_0.53_Windows-64bit.zipというファイルをダウンロードしてきました。

今回はPATHの通し方などの説明は省略しますが、ダウンロードしたHugoのバージョンを確認して、extendedと表示されることを確認してください。確認できればSass/Scssを使う準備は完了です。

> hugo version
Hugo Static Site Generator v0.53/extended windows/amd64 BuildDate: unknown

--versionではないので注意しましょう。私はよくコンパイラに怒られています)

Sass/Scssの違い

  • CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
  • Sass
nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
  • Scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
}

(ハイライトが残念で見にくいですが)
Sass/Scssはネストして書けるため、冗長さが減りわかりやすいですね。

さらにSassでは{}や行末の;がなくなっていて非常にすっきりしています。
(初めて見たときはなんだこれ?って思ったのですが、pythonっぽいと思った瞬間書きやすそうって思いました)

ですが、ScssはCSSを修正しなくてもそのまま使えるということで、このブログではScssを採用しています。

Sass/Scssの書き方はSass公式サイトのSass: Sass Basicsが参考になると思います。検索すれば日本語のページもたくさん出てきます。

使い方

拡張子の変更

cssファイルの拡張子をscssに変更します。(例:style.css → style.scss

scssファイルの移動

assetsフォルダの下にscssフォルダを作りscssファイルを移動してください。

├─archetypes
├─assets
│  └─scss ←ここに移動する
├─content
├─i18n
├─layouts
├─public
├─resources
└─static

htmlファイルの修正

baseof.htmlhead-custom.htmlなどのcssファイルを記述しているHTMLファイルを修正します。編集するファイルは各テーマに合わせて読み替えてください。

{{ $scss := resources.Get "scss/style.scss" }}
{{ $style := $scss | resources.ToCSS }}
または
{{ $style := resources.Get "scss/style.scss" | toCSS }}
<link href="{{ $style.Permalink }}" rel="stylesheet">

resources.ToCSSを使用してCSSファイルに変換します。出力されたソースは以下のようになります。

 <link href="http://example.com/scss/style.css" rel="stylesheet">

CSSファイルの圧縮(minify)やキャッシュバスティング(fingerprint)にも対応しています。

{{ $style := resources.Get "scss/style.scss" | toCSS | minify | fingerprint }}
<link href="{{ $style.Permalink }}" rel="stylesheet">

【minifyやfingerprintについては関連記事をどうぞ】

速いは正義!HugoでHTMLやCSSを圧縮してサイト表示を高速化する方法! | わからないから調べるブログ

HUGOのビルド時にHTMLファイルやCSS、JavaScriptファイルを圧縮して出力する方法をまとめました。

キャッシュなんて怖くない!Hugoでキャッシュバスティングを使ってみよう! | わからないから調べるブログ

Hugoのキャッシュバスティング(cache basting)実装方法まとめです。 キャッシュバスティングとは、CSSなどの静的ファイルを更新し...

あとは、Scssを自由に編集すればOKです。

オプション

オプションの指定例です。

{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "node_modules/myscss")) }}
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}

targetPath

targetPathを指定すると指定したファイル名でCSSファイルが出力されます。指定がない場合は、元のファイル名のまま拡張子のみcssに変換されます。

{{ $options := (dict "targetPath" "test.css") }}
{{ $style := resources.Get "scss/style.scss" | resources.ToCSS $options }}

【出力結果】

<link href="http://example.com/test.css" rel="stylesheet">

outputStyle

圧縮率の違うexpandednestedcompactcompressedの4つが指定できます。 デフォルトはnestedです。

{{ $options := (dict "outputStyle" "compressed") }}
{{ $style := resources.Get "scss/style.scss" | resources.ToCSS $options }}

圧縮の度合いは、右に行くほど強くなります。 expanded < nested < compact < compressed

expandedを指定した場合
body {
  line-height: 2rem;
  background: #f0f8ff;
}
.blog-header, .blog-pagination {
  margin-bottom: 2em;
  border-bottom: solid 1px #E6E8EA;
}
nestedを指定した場合
body {
  line-height: 2rem;
  background: #f0f8ff; }
.blog-header, .blog-pagination {
  margin-bottom: 2em;
  border-bottom: solid 1px #E6E8EA; }
compactを指定した場合
body { line-height: 2rem; background: #f0f8ff; }
.blog-header, .blog-pagination { margin-bottom: 2em; border-bottom: solid 1px #E6E8EA; }
compressedを指定した場合
body{line-height:2rem;background:#f0f8ff}.blog-header,.blog-pagination{margin-bottom:2em;border-bottom:solid 1px #E6E8EA}

compressedのみコメントが削除され、それ以外はコメントも残ります。特に理由がなければcompressedを指定しておけば良さそうです。

なおHugo公式サイトによると、オプションでcompressedを指定するとresourced.Minifyよりも縮小をうまく処理してくれるとありました。 具体例がないので詳細はわかりませんが、予期せぬエラーが起こりにくいということでしょうか。

precision

浮動小数点演算の精度の指定です。小数点以下をどこまで扱うか指定できます。

情報不足でこれ以上のことがわからないため、知っている方がいたら教えていただけると嬉しいです。

【追記】
教えてほしいと言っていたら本当に教えていただけました!irisさんありがとうございます!

早速、適当な計算式を用意して試してみました。

Scssの内容
.test{width: (100% / 3)}
オプションを使用しなかった場合
.test { width: 33.33333333%; }

計算結果は33.33333333%になりました。

(Sassの更新履歴ではデフォルトで小数点以下5桁の精度と書かれていたんですが8桁表示されました。なぜ???) 【参考】File: SASS_CHANGELOG - Documentation by YARD 0.9.12

桁数を3桁に指定した場合

{{ $options := (dict "precision" "3") }}
{{ $style := resources.Get "scss/test.scss" | resources.ToCSS $options }}
結果
.test { width: 33.333%; }

想定通り小数点以下の桁数が変化していますね。同様に”1”を指定したら33.3%と出力されていました。

Scss内で計算式を多用している場合は、CSSファイルのサイズ縮小が期待できそうです。

enableSourceMap

ソースマップが生成されるらしいのですが、こちらも勉強不足でよくわかりませんでした……。

確認方法があっているのかわかりませんが、とりあえず下記のように出力してみたらScssの内容が表示されたのできちんと生成されているようです。

{{ $options := ("enableSourceMap") }}
{{ $style := resources.Get "scss/style.scss" | resources.ToCSS $options }}

出力結果

<link href="http://example.com/enableSourceMap" rel="stylesheet">

【追記】完全に見落としていましたが、style.cssを出力したときに最後に一文追加されるようです。末尾に.mapがついたものがソースマップのようですね。

/*# sourceMappingURL=style.css.map */

includePaths

相対パスを指定して追加でSass/Scssを読み込みます。

ここもイマイチよくわからず……。もう少し調べてみたいので一旦保留です。

あとがき

最後のオプションでグダグダになりましたが、Sass/Scssを使うだけならとても簡単に使えます

ネストでまとめられるのは間違いを見つけやすくていいですね。実際に今回のScss化で無駄な重複箇所を見つけられました。
(単純に見直したからという気もしますが、ミスを見つけやすいのは間違いないと思います)

オプションについては、今のところ必要性を感じていないので使用していません。それでも十分便利だと思います。

わからないことを調べていると発見が次々あって面白いですね。ソースマップなどは今回初めて知りました。調べながらなのでかなり頭が疲れますが、知識が増えるのは嬉しいことです。Hugo最高!

参考にさせていただいたサイト様


関連ページ