`executeAsTemplate` on scss partial before `toCSS` on main.scss file

support
1

What I am envisioning is allowing the user to set an accent color for each unique taxonomy, which would require a loop creating the CSS or SCSS.

{{- range $taxonomyname, $taxonomy := .Site.Taxonomies }}
{{- range $taxonomy }}
{{- if .Page.Params.backgroundColor }}
.card {
  &[data-taxonomy="{{ print .Page.Section "-" .Page.Title | urlize }}"] {
    background-color: {{ .Page.Params.backgroundColor | default "var(--color-primary)" }};
  }
}
{{- end }}
{{- end }}
{{- end }}

Ideally, this logic would exist in assets/scss/component/card.scss with @use "card" inside of assets/scss/components/_index.scss and then @use "component" inside of assets/scss/main.scss.

My goal was that the styles can stay in the correct location to ensure they load in that priority.

I tried a couple variations of this, but it didn’t seem to work as I thought it would:

{{ resources.ExecuteAsTemplate "scss/component/card.scss" . "scss/component/card.scss" }}
{{ $options := dict
    "targetPath" "css/main.css"
    "transpiler" "dartsass"
}}
{{ with resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "scss/main.scss" . | toCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

Is there a way to do this (either as I intent, or simplier)? Or would I just be better creating a hugo.scss that gets processed and tagged on the end (dealing with any style conflicts later)?

2

I would say that after we got the vars option (see below), I cannot think of many use cases for using executeAsTemlate for this.

3

I think the crux of the issue is that the loop needs to occur inside of the SCSS file. This could be done outside of Hugo but would require the term and accent color to be passed through.

My understanding is that vars cannot be nested, so the following wouldn’t be valid:

[params.vars]
headerFont = "Font"
taxonomies = [["term1","color1"],["term2","color2"]]

My understanding is that only one set of vars can be passed through, so the following also wouldn’t be valid (nor would be any variants):

[params.vars.style]
headerFont = "Font"

[params.vars.taxonomies]
term1 = "color1"
term2 = "color2"
// -- //
"style" site.Params.vars.style
"taxonomies" site.Params.vars.taxonomies
// -- //
@use "hugo:style";
@use "hugo:taxonomies";

The use case is that content/[taxonomy]/[term].toml allows you to define data for the term, including any potential styling to data the is associated with that term. Everything is edited in one location, rather than editing there and config.toml.

4

You need key/var pairs, but something along this is possible:

[[params.vars]]
data = ["term1", "color1"]
[[params.vars]]
data = ["term2", "color2"]

And then range through

{{ range $params.vars }}
  {{ range .data }}
    {{ . }}
  {{ end }}
{{ end }}

I don’t quite get your last paragraph with the use case, but I would have a config “table” like this:

[[taxonomies]]
slug = "taxonomy term"
var1 = "value"
var2 = "another value"

[[taxonomies]]
slug = "another tax term"
var1 = "value for this var"
var2 = "and so on"

I would maybe pack this into a data file instead of the params section of the config.