今流行りのスタイルシートは、Sass らしい。

Sass は Cascading Style Sheets (CSS)で解釈される2種類の構文で構成されたスクリプト言語であり、SassScript はスクリプト言語自体を示す。 はじめにできた「インデント構文」では、Hamlと同様にコードブロックや改行コードを分離する際に字下げを活用している。単にSassと言ったらインデント構文のことを指す場合も多い。新しい構文である「SCSS」は、CSSのようなブロックの書式を使用し、ブロック内の別々の行にブロックとセミコロンを示すため波括弧を用いている。

Sass – Wikipedia

今の時代、CSS を直に書くのではなくて、Sass で書いて、CSS にするのが流行りっぽい。

調べてみたら、Sass の中にも SASS と SCSS という2種類の記述方法があるんですね。

入れ子構造も簡単だし、変数や計算、繰り返しとか色々できるようになっているみたい。

[.css]

div {
    font-size: 2em;
}
div p {
    font-size: 1em;
}
div p span {
    font-size: 0.8em;
}

[.scss]

div {
    font-size: 2em;
    p {
        font-size: 1em;
        span {
            font-size 0.8em;
        }
    }
}

[.sass]

div
    font-size: 2em
    p
        font-size: 1em
        span
            font-size 0.8em

主流なのは、CSS と互換のある SCSS だそうです。

でも、SASS のほうが入力の手間も少ないし、良さそうに感じるんだけど、互換性というところが人気なのかしら。

ちなみに、SCSS と SASS はそのままでは使えないので、事前に CSS へ変換して使うようです。

早速、Hugo で試そうとしたら、

お使いのバージョンは対応していません。

と怒られた。

対応しているって、ネットに書いてあったんだけど・・・。

さらに情報を集めると、xtended という拡張バージョンじゃないとダメっぽい。

私の Sass 終了。

また時間の出来たときにでも再挑戦かな。
標準の Hugo に入れてくれれば良いのにね。