.Page.Params in scss

support
1

I am using the inbuilt scss compiler and its working great. I have been able to set variables in my config.toml file and have my main.scss file pull them in and they show in my css.

I have a scenario where I would like to use page variables in my css and I do not know how to do it or even if it is possible (I have tried to work it out). The reason I want to do this is because I want to be able to control the css value of object-position: using the page param banner_offset

How would I do this?

2

You’ll wanna checkout: https://gohugo.io/hugo-pipes/resource-from-template/

1 Like
3

Thank you for referring me to those docs. I don’t fully understand how hugo pipes works but I’ve got them working with the following code in head.html partial.

{{ if .Site.IsServer }}
    {{ $cssOpts := (dict "targetPath" "styles/main.css" "enableSourceMap" true ) }}
	{{ $styles := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
    {{ else }}
    {{ $cssOpts := (dict "targetPath" "styles/main.css" ) }}
	{{ $styles := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
{{ end }}

The reason I am asking how to use Params from a partial html file is that I do not know how to use Params from the config.toml file as well as Params from a partial. I’ve tried to find docs online for this but I’ve not found any that I understand.

4

I’ve written on this before, maybe it’s helpful to you

5

I have read your article but I am still not clear how I do this. To use variables from a partial, do I need to use multiple css output files?

6

Taking your original example, let’s say your config.toml has:

[params]
  banner_offset = "left bottom"

Then in your assets/css/style.css file:

div {
  object-position: {{ site.Params.banner_offset }};
}

Then when linking your CSS file:

{{ $style := resources.Get "css/style.css" | resources.ExecuteAsTemplate "css/style.css" . }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
7

Thank you for clarifying that. I apologise I have not explained myself properly, I do not want to use Site.Params, I want to use Page.Params. Each page has a banner image and each image needs to be aligned in a specific way, so I would like to use a .Page.Param in the CSS for each banner.

8

So you have a CSS file for each page?

If it’s a per page thing, I would stay away from an external CSS file and just use the page param in internal or inline CSS.