Pipes and a seasonal color palette

tips & tricks
1

Finally had time to experiment with the Hugo SSG pipeline feature for real, and it really let me process sass easily without too much npm. If I did not care about autoprefixer, I could eliminate npm altogether.

I wanted to change the site color palette depending on month, and was able to do it easily with this feature.

I made /myproject/assets/main.scss, imported scss files at the top (from the transpiled tachyons-sass library), and then used Hugo template code in it to do the conditional bits.

In <head> (assumes postcss-cli and autoprefixer are installed via npm), I then get and manipulate the main.scss per the various other tutorials in here and in the docs, and link the result:

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

In the /assets/main.scss:

@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; }
...
::selection {
  background-color: $textHilite;
  opacity: 0;
}
...

Then you just use the classes in your templates like <footer class="tc center bg-two white-90 pv5 pv6-l ph4">. When you compile, Hugo will check for the current month, find the right colors and generate the css you need to display them.

Notice also that you can pull from your config.toml site params, and passing a color var that Tachyons already has set in its defaults worked too:

[params]
    ISO8601 = "2006-01-02T15:04:05JST"
    googleAnalytics = "UA-12345678-9"
    [params.style]
       textHilite = "$gold"
...

Slick!

1 Like
2

Added a variable for a banner image. In the main.scss conditional do:

$banner: "banner-02.jpg";

Then set a class calling the variable like #{$thevar}).

.topbanner { background-image: url(/img/#{$banner}); }

Then set it in the class of an element that will have the image as its background:

<div class="cover bg-left bg-center-l topbanner" >...
1 Like
3

This concept is triggered by the Hugo build, so if you are not posting much and still want it to change, then just schedule a daily build using a CI pipeline, for instance.

4

Did anything change in your setup since you wrote this post? I am asking because I myself have the autoprefixer in the pipe setup via postcss:

{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
{{ $style := resources.Get "sass/theme.scss" | resources.ToCSS $options | resources.PostCSS (dict "config" "postcss.config.js" "noMap" true) |  resources.Fingerprint "sha512" }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">

and in postcss.config.js then:

module.exports = {
    plugins: {
        autoprefixer: {
        }
    },
}

It still needs to be installed via npm, but Hugo is responsible for all of my SCSS compiling.

5

Still using it the same way.