SASS/SCSS

はじめに

Hugoでは、SASS/SCSSをCSSに変換する機能を提供しています。

この機能を使うには、リリースディレクトリにある、hugo_extend_XXX.deb/tar.gz/zip を利用する必要があります。

使い方

このサイトでは、SCSSを利用しています。テンプレートには、以下のように記述しています。resources.ToCSSを利用して、CSSに変換することができます。

変換対象のファイルは、assetsディレクトリに配置します。

1
2
3

{{ $options := (dict "targetPath" "/css/garretlab.css") }}
{{ $style := resources.Get "scss/garretlab.scss" | resources.ToCSS $options }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

オプション

以下のオプションを利用することができます。

オプション 型 意味 デフォルト値
targetPath 文字列 出力するCSSファイル名 SASS/SCSSファイルの拡張子を.cssにしたもの
outputStyle 文字列 nested、expand、compact、compressedから選択 nested
precision int 浮動小数点の精度 8(ソースコードからの推測です)
enableSourceMap bool ソースマップを生成するか false
includePaths 文字列のスライス SASS/SCSSの追加のパス(プロジェクトルートからの相対パス)

オプションは、dictを利用して、オプション名と値の組を設定します。

最終更新日

November 5, 2023

inserted by FC2 system