Using resources.ExecuteAsTemplate and site config.toml to define MQ Breakpoints

support
1

I’m trying to create a reusable set of scaffolding for some Hugo projects at work, and I’m having trouble figuring out how to let users define breakpoints inside config.toml. I’ve set up a sample repository here since I can’t share the internal project at the moment, but the sample repo illustrates my issue.

config.toml:

...
[params]
    mqsmall = "360px"
    mqmedium = "640px"
    mqlarge = "960px"
    mqextralarge = "1440px"
...

Usually I keep my $S, $M, $L, and $XL inside scss/abstracts/_variables.scss, which is then imported by scss/abstracts/_abstracts.scss, which is then ultimately the first @import statement inside of scss/style.scss. I need these variables (i.e. $S…$XL) for a media query mixin we are using internally.

What I would like to do is be able to set these values inside of config.toml so that the user only has to set them once (I need these values elsewhere in the rendered site, so it’s not just limited to the output CSS).

I’m current using the following inside of layouts/partials/stylesheets.html:

{{ $cssOpts := (dict "targetPath" "css/style.min.css" "enableSourceMap" true ) }}
{{ $templateSCSS := resources.Get "scss/abstracts/_breakpoints.scss" }}
{{ $styles := $templateSCSS | resources.ExecuteAsTemplate “scss/style.scss” . | toCSS $cssOpts }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">

Which seems to follow the example in the documentation almost exactly.

Any help is greatly appreciated. Thanks!

2

HI,

From your code snippet here’s what happens:

  1. You create a resource out of _breakpoint.scss.
  2. You then execute it as template and store the resulted scss file at scss/style.scss. So I’m pretty sure the content of scss/style.scss is your intiial _breakpoint.scss with your config.yaml breakpoint values.
  3. Ultimately you only load with the <link> tag the css compiled version of that lone _breakpoint.scss “templated” resource.

For now you would have to isolate the scss file with the breakpoints, execute it as template, concatenate the resulting resource with the rest of your scss files (distinct files or just the one importing the remaining abstracts) and then compile this bundle to css.

Of course you would have to make sure the order is respected when concatenating.

3

Thanks much @regis. You always give great feedback :smile:

I might not have a chance to check this until I leave work, but perhaps this is the best approach:

  1. Store _breakpoints.scss executed as template in a variable, $breakpoints.
  2. Store style.scss in variable $styles.
  3. Concatenate $breakpoints $styles
  4. My question is this, though: scss/style.scss is just a list of @import statements, but perhaps this won’t matter?

Will update shortly. Just wanted to say thanks first though!

4

No it won’t. Il will just create one scss file starting with the content of $breakpoints “templated” if you will, and continuing with the content of style.css which if I understand correctly does not need any “templating”.

Oh so welcome!

5

For those who might find this later on, here is the solution. Thanks again, @regis!

{{ $cssOpts := (dict "targetPath" "css/style.css" "enableSourceMap" true ) }}
{{ $breakpoints := resources.Get "scss/abstracts/_breakpoints.scss" }}
{{ $bps := $breakpoints | resources.ExecuteAsTemplate "_bps.scss" . }}
{{ $stylepartial := resources.Get "scss/style.scss" }}
{{ $styles := slice $bps $stylepartial | resources.Concat "scss/all-styles.scss" | toCSS $cssOpts | minify }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
3 Likes