Hugo で Sass を使ってみる

余談ですが、いつもお世話になっているサイト様

スタイルシートの記述で迷ったとき、こちらのサイトを参考にすることが多いです。
いつもお世話になっております。

Hugo で Sass を使ってみる。

本題へ。
昨年、Hugo も Sass に対応したようですが、標準のモジュールでは使えず、extended版が必要になります。

Hugo のバージョンを確認する。

hugo version で現在のバージョンが確認できます。

hugo version
Hugo Static Site Generator v0.54.0/extended hogehoge...

extended の文字があった方はおめでとうございます。無かった方はダウロードを行ってください。

Hugo の extended版をダウンロードする。（必要あれば）

extended版では無かった方。
こちらから、extended ってファイル名に付与されているものをダウンロードしてください。
下のほうにあるはず。

Releases · gohugoio/hugo

ダウンロード後、入れ替えをします。

Sass のファイルを用意する。

現在使っているスタイルシートで良いので、下記に配置します。
また、この後の作業をスムーズにするため、ファイル名も変更しています。

サイト名\assets\sass\main.scss

assets\sass がない場合は作っちゃってください。
また、Sass には .sass と .scss の2種類が存在しますが、元の css と互換性のある .scss としています。ここは好きな方にして良いですが、.sass の場合は、中身の編集もあわせてお願いします。

スタイルシートを読み込む html の編集をする。

テーマによってファイルが異なると思いますが、ここでは aether の場合で書いていきます。

サイト名\layouts\partials\head.html を開きます。
ファイルが無い方は、テーマの中 テーマ名\themes\aether\layouts\partials\head.html から、コピーして持ってきてください。

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

1行目が元々入っている全体のスタイルシートの読み込み部分です。
今回は2行目と3行目を追加します。

2行目
先程用意した main.scss を読み込み、パイプ | を使って、CSS 形式に変更したり、圧縮したりしています。
パイプを使うと、どんどん右の作業工程へ材料を渡していけますので、1行だけでいくつかの加工が可能です。

3行目
2行目で加工したスタイルシートが $style に入っているので、それを通常通りの書式でスタイルシートとして読み込みます。

※別途、スタイルシートを用意して読み込んでいた場合、置き換えるのであれば、その行を消してください。

あとはお好きにスタイルシートを弄ってください。

以上で、Sass を使うための準備は完了です。
ミスっていると、hugo server でローカルサーバーを立ち上げたときに怒られます。
ちなみに私は、事前準備は出来ていましたが、スタイルシートの中身で怒られました。

それは次の項で。

怒られたのは、main.scss の中身

ローカルサーバーを立ち上げたときに、エラーが出て起動しませんでした。
メッセージには、ご丁寧に

スタイルシートの読み込みでエラーがあった
何行目の何文字目がおかしい

と書かれています。

何か問題でも？

該当する箇所の確認をすると、背景色の指定をしているところでした。

background: rgb(230, 90, 90, 0.2);

何か問題でも？

しばらく気付かなかったんですけど、落ち着いて見たらようやく答えが分かりました。
というか、そもそもこの透過処理のことを私がよく分かっていなかったのが問題です。

その前に、色の指定について

色の指定については、いくつかの方法があります。
”赤” という色を表す場合、

red
#ff0000
rgb（255,0,0）

こんな風に、何通りか指定方法があります。（実はまだ他にも・・・）

今回の間違いは・・・

で、今回の件なんですけど、背景色を透過させたいということで指定をしています。

透過させるときは、色指定に rgb を使ってあげるんです。
通常は、rgb(red,green,blue) の三原色で指定するんですが、そのあとに alpha というチャネルが入り、ここで透過具合を数値で入れると反映されます。

私もそこまでは知っていたんですけど、alpha が入るときに rgb が rgba になることを知らなかったんですね。

ということで、私の知識不足により、元々の .css からおかしかったというオチでした。

下記のように書き直したところ、きちんとスタイルシートの変換がされ、サーバーが起動しました。

background: rgba(230, 90, 90, 0.2);

同じ Sass だけど .sass か .scss か

Sass と言っても、記述方式が2通りあり、好きなほうを使えます。
.sass は、{} や ; が不要なので、すっきり、そして少ない文字数でコーディングが可能。
.css から拡張されている、いくつかの機能はどちらも同様に使えます。

.sass と .scss のどちらが良いのかというのは、ネット上でも議論されていますが、私の結論としては 「好きな方をどうぞ」 です。

ちなみに私は、.scss にしました。

最初は .sass のほうが絶対に良いだろうと思って、.css を書き直していたんですけど、{} が無いと、どこからどこまでが今書いている範囲なのか、パッと分かりませんでした。

ということで、私の頭の都合で .scss を選んだ次第です。
そのような制限がなければ .sass を選んでいたかな。

まぁ、最終的にはどちらも .css に変換されますので、サイトの表示速度に有利なのはこちらだとか無いはず。（私の理解では・・・）

余談ですが、いつもお世話になっているサイト様