Hugo: использование SASS

#hugo #sass #html #css

Довольно долгое время стили сайта размещались на отдельном домене. При этом исходный код хранился в отдельном репозитории, стили генерировались с помощью node, после чего вручную выгружались, менялся код страниц сайта. И только после этого изменения находили свое применение.

Это было долго, муторно. Поэтому оформление старался не менять и не трогать.

На днях обратил внимание на то, что в Hugo есть возможность использования SaSS и SCSS стилей, которые генерируются в CSS при генерации сайта. При этом есть возможность использования целого ряда фильтров.

Официальная документация находится на странице: SASS / SCSS

Создал директорию assets в корне сайта и разместил там стили и скрипты, которые ранее использовал: assets

Перенес код стилей во вложенную директорию scss. Дальше для того, чтобы запустить генерацию и использовать полученные стили, обязательно необходимо прописать в шаблон страницы код для генерации:

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

Первая строка определяет переменную, в которой будет размещаться код стиля. В пайпе передаем функции по изменению кода, в данном случае используется генерация CSS-файла, его минификация, и дополнительно генерируются отпечатки.

После генерации на странице получаем код:

<link rel="stylesheet" href="http://www.juev.org/scss/master.min.a207dd115830b020853256719258584f3b533d47db00ce70b773262f96b6485a.css" integrity="sha256-ogfdEVgwsCCFMlZxklhYTztTPUfbAM5wt3MmL5a2SFo=">

Довольно просто, и теперь, внедрив генерацию стилей непосредственно в код сайта, можно менять оформление на лету. Запуская Hugo локально и меняя scss-файлы, видя результат. А после комита в репозиторий получая результат на сайте.