Rick Cogley's Tech Logr

Short Technical Laser Bursts %%

RC Logr 20190228 074744

Thursday, 28 Feb, 2019

Finally had time to experiment with the Hugo SSG pipeline feature for real, which lets you process sass easily, and without too much reliance on npm. Make /myproject/assets/main.scss, import your scss files at the top (say from a library like tachyons), and then use Hugo template code in it to do some interesting stuff. I tried pulling params from config.toml, and a conditional month check to set colors per the season, and it works a treat!

In your <head> (assumes postcss-cli and autoprefixer are installed via npm):

1
2

{{ $styles := resources.Get "main.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">

In your main.scss:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

@import "tachyons-sass/tachyons.scss";
$textHilite: {{ .Site.Params.style.textHilite | default "goldenrod" }} !default;
{{ $mnth := now.Format "January"}}
{{ if eq $mnth "January" }}
$one: #658248 !default;
$two: #a0cf89 !default;
{{ else if eq $mnth "February" }}
{{ end }}
...
.one { color: $one; }
.two { color: $two; }
.bg-one { background-color: $one; }
.bg-two { background-color: $two; }
...

Then just use the classes in your templates.

RC Logr 20190228 074744 - Finally had time to experiment … Rick Cogley
Back to Home Tweet Link