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

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

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

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

Официальная документация находится на странице: [SASS / SCSS](https://gohugo.io/hugo-pipes/scss-sass/)

Создал директорию `assets` в корне сайта и разместил там стили и скрипты, которые ранее использовал: [assets](https://github.com/juev/juev.org/tree/b0c1fb27b2eff70087bfca76f393172734822d83/assets)

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

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

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

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

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

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