Hi there

After spending my free time exploring new front-end libaries available in GoHugo I came across a great tool called SASS.

The great thing about Sassy CSS is the ability to create functions inside your scss file (css).

Official SASS Documentation:

https://sass-lang.com/

For GoHugo Users:

https://gohugo.io/hugo-pipes/scss-sass/

To get started using SCSS in Gohugo in four simple steps

1. Create/Move ‘asset’ folder to the root of your project. This can also be nested in your resources folder if you have the following in your config file

assetDir = "resources/assets"

1. Create a folder called ‘sass’ inside the asset folder. This is where you will put your scss file containing the the css/scss code.

2. Create a file inside sass ‘main.scss’. This is the file that will be compiled when gohugo detects changes in the scss file.

3. Include in your head.html partial the following,

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

Please make sure the file name matches the filename given in the code above!

Examples of SCSS

See the Pen flat shadow over text by Jared Lynskey (@jared-lynskey) on CodePen.