はるなぴログ

WEBサイト作成技術研究

静的サイトジェネレータHugoがSass(SCSS)対応(pipeline)

静的サイトジェネレータHugoがSass(SCSS)に対応(pipeline)とのことです。

gohugo.io

ずっとHugoを追いかけてきています。最近はサイトを作らずニュースだけの追いかけですが…

Hugoの進化が早いのでニュースの追いかけだけでもなかなか大変です。早くサイトを作ってみたいと思っています。

Sassとは

CSSをもっと簡単に書きたい。繰り返し同じことを書くのではなくもっと単純化して書きたい。

このような要望を満たしてくれるのがSassでありSCSSです。SassとSCSSは記法が若干違います。

Sass記法やSCSS記法で書いたものをコンパイルすることでCSSファイルが出来上がります。

Sass記法を具体的に見ていきましょう。

div {
  width: 300px;
  padding: 10px;
     p {
    color: #f00
    }
}

あれ?pタグがネストの中に入っていますね!

そう、Sassではネストが使えます。これで記述量を減らすことができます。ネスト無しで書くと冗長になりますし、離れて書いてあると関係性が分かりにくくなります。

div {
  width: 300px;
  padding: 10px
}

div p {
  color:# f00
}

更に変数を使うことも可能です。例えば…

$box-width: 300px;

div {
  width: $box-width;
  padding: 10px;
     p {
    color: #f00
    }
}

同じ数値設定をあちこちで使う場合、一か所で定義しておけば後で数値が変更になってもラクチンです!

他にもまだSassの使い方はいろいろありますが、今回はこのぐらいににしておきます。たくさんのCSSを書く場合には大変便利なものです。

HugoがSassに対応すると何がいいのか?

静的サイトジェネレータHugoにはLiveReloadという機能が備わっています。

LiveReloadとは何かというと、特定のフォルダの中のファイルに変更があると即座にサイトを再構成する機能です。

Hugoではhugo serverというコマンドでローカルサーバーを立ち上げ、自分のサイトをブラウザに表示させることができます。

ですので、例えばCSSファイルを変更すれば、即座にその変更がローカルサイトに反映されて結果をブラウザで目視することが可能です。これは開発スピードがぐっと縮まりますよ!

ま、言ってみればひとりDevOpsですね!

はるなぴは、はてなブログで外部CSSファイルを当てていますので、一瞬で変更が確認できることの便利さを体感済みです。こちらの記事をご参照ください。

www.halu7.com

SassファイルもLiveReloadさせることが可能に

CSSやマークダウンファイルだけでなくSassファイルもLiveReloadが可能になります。

今まではSass(SCSS)ファイルをコンパイルしてCSSに変換し、それをHugoで設定しているCSSフォルダに入れる必要がありました。

もちろん別途nodeなどを組み合わせて使えばSassファイル変更からCSSファイルへの変換・フォルダへのコピー等を自動化することは可能です。でもひと手間余計にかかってしまいますね。

HugoがSassに対応することでSass(SCSS)ファイルそのままで変更分がLiveReloadされ即座にブラウザで変更を確認することが可能になります。

大規模なCSSファイルを扱っているサイトにとってはかなり便利な機能と言えると思います。

いつの間にかminifyにも対応していました

バージョン0.43のリリースを読んで分かったのですが、いつの間にかminifyにも対応していました。

resources.Minify: Currently supports css, js, json, html, svg, xml.

はるなぴはとりあえずHTMLファイルとCSSファイルをminifyしてくれれば大変助かります。今まではnode(gulp)を使って処理していました。

これでどんどん手間が省けます。やっぱりスゴイHugo!