SASS/SCSS

Little does everybody know, Hugo released an extended version which has SASS/SCSS processing capability. The caveat however, is that you need to install Hugo extended application and not the regular version.

Setup Hugo Extended Version

You need to check your Hugo version. Try:

$ hugo version | grep extended

Hugo Static Site Generator v0.54.0/extended linux/amd64 BuildDate: 2019-02-01T13:31:26Z

You should observe the word extended in the output, and get some output. Otherwise, skip this step.

If you don't get any output, your Hugo does not have the SASS processing function. Therefore, you need to reinstall Hugo with the extended functions based on your operating system.

Reinstalling

There is no one way of doing it. The idea is that you download the extended version from your official channel. Here are some examples.

Snapcraft

$ sudo snap remove hugo

$ sudo snap install hugo --channel=extended

Official Download

Look for hugo_extended_XXX, usually at the bottom.

Assembling Your Assets

Next is to place all your SASS inside your assets directory (default is ./assets). You can make a sub directory called css inside it.

Process the SASS

Now, to process the SASS, you simply use resources.ToCSS function.

{{- $css := resources.Get "css/mySASS.sass" | resources.ToCSS | minify | fingerprint "sha512" -}}

Linking to HTML

The output file would be a css style object. You can just use it as the following:

<link rel="stylesheet"

      href="{{- $css.Permalink -}}"

      integrity="{{- $css.Data.Integrity -}}" />

Otherwise, if it is under 50k (AMP standards) in size, you can inline it for better user experience:

<style type="text/css">

{{ $css.Content | safeCSS }}

</style>

That's all about SASS/SCSS implementation in Hugo.