Templating values in css

support
1

So I had a couple of ideas … but I’m running into how to insert variables into css. Two situations I’m imagining:

  1. Having the configuration identify a mask for an image.
  2. Having the configuration identify a Google font to use. I realize others have developed this functionality already … but I added this one because I believe it requires the same action I am wondering about for #1.

So I’m trying to figure out if the hugo templating system is applied to CSS. My first perfunctory attempt at making this work didn’t seem to get the values replaced:

{{ with .Site.Params.ImgMask }}
.sidebar .masked {
    -webkit-mask-image: {{ . }};
    .mask-image: {{ . }};
}
{{ end }}

So before I started banging my head against this, I thought I’d ask here …

  1. Does hugo templating apply to the css/scss files?
  2. Is there some other best practice that people are doing this approach that you can recommend?

Thanks in advance. :slight_smile:
Carmine

2

Use ExecuteAsTemplate: Creating a resource from template | Hugo

3

Thank you this looks to be it. :slight_smile:

Carmine

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.