Getting front-matter variables into sass

[cloud-nine]

Taking a look at following code from this post:

{{ $inServerMode := .Site.IsServer }}
{{ $sass         := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . }}
{{ $sassIncludes := (slice "assets/dependencies/" "assets/scss/" "assets/scss/vendors/") }}
{{ $cssTarget    := "css/styles.css" }}
{{ $cssOpts      := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true "includePaths" $sassIncludes) (dict "targetPath" $cssTarget "includePaths" $sassIncludes "outputStyle" "compressed") }}

Of course ‘scss/main.scss’ is executed as template and can take front-matter variables from page bundle, via dot, but where does ‘style.main.scss’ live? What’s in it, and how does it relate to ‘scss/main.scss’?

The name of ‘style.main.scss’ is arbitrary? The output file for main.scss after processing as template?

Anyway, pardon that question - Hugo does have anyway a curve.

The goal here is to rewrite css-grid-template declarations at the page level by dropping a page.scss into the leaf bundle with associated front-matter variables declared in the post, hence the topic title.

This is the set-up:

{{ $sassMain := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sassMain.scss" . }}
{{$sassPage := resources.Get "sass/page.scss"}}
{{ with (.Resources.GetMatch "page.scss") }}
{{$sassPage = ""}}
{{ $sassPage = .Content | resources.ExecuteAsTemplate "sassPage.scss" . }}
{{ end }}
{{ $sassIncludes := (slice "assets/sass-includes/" "node_modules") }}


{{- $sassOpts := dict "targetPath" "css/main.css" "includePaths" $sassIncludes -}}
{{- if (in (slice (getenv "HUGO_ENV") hugo.Environment) "production") -}}
{{- $sassOpts = merge $sassOpts (dict "outputStyle" "compressed") -}}
{{- end -}}

{{- $styles := resources.Get "styles.css" -}}
{{- $syntax := resources.Get "syntax.css" -}}

{{ $sassBundle := slice $sassMain $sassPage | resources.Concat "sass/sassBundle.scss" | resources.ExecuteAsTemplate "sass/sassBundleParsed.scss" . | toCSS $sassOpts }}

{{ $mainBundle := slice $styles $syntax  $sassBundle | resources.Concat "css/bundle.css" }}

{{- if (eq (getenv "HUGO_ENV") "production") -}}
{{- $mainBundle = $mainBundle | postCSS | minify | fingerprint "Sha512" -}}
{{- end -}}

<link rel="stylesheet" href="{{- $mainBundle.RelPermalink -}}" integrity="{{- $mainBundle.Data.Integrity -}}"/>

There’s a file with a meaningless sass declaration assigned to $sassPage, to avoid an empty slice error when there are no page.scss files in bundles.

Hugo runs with no page.scss files, but gives error when a test page.scss is included in a bundle.

This looks like page level resources don’t like sass format, as the error is more or less no strings allowed in ExecuteAsTemplate.

Here is the front-matter test variable assignment so far:

[[style.footer]]
grid-column = "1/span 2"

and here the insertion of the hugo variable into page.scss

$$ft-75-gc = {{ .Param.style.footer.grid-column}};

Neither ‘=’ nor “:” will work in page.scss.

Is this procedure actually possible (inserting front-matter variables into sass files at the page level), or can hugo variables only get into sass files through the assets directory (the way Regis does it here )?

If it is possible, in what order does .Concat concatenate files? Can sass variable inserted at page level override sass variable inserted at global level through concatenation?

Looking for a quick way to restructure page grids from front-matter

[cloud-nine]

Looking back at this the challenge was to introduce custom variables into sass from the page bundle, so any page could override the main css.

The confusion came from thinking dynamically and not statically. There’s one main css bundle, you can’t have different values in it for any given page because it’s statically produced just once. If you want to override you need of course separate css for each page included near end of head tag.

Easy enough to generate a page bundle css and drop it in. What worked for me was this:

page bundle front matter:

+++
[[resources]]
pageSass = "page.scss"
+++

Drop into page bundle directory sass file:

page.scss

Include your includes in your page bundle sass file

@import "../assets/sass/includes/media_queries";

Drop into head near closing tag:

 {{ with .Resources.GetMatch "page.scss" }}
<style> {{ (. | toCSS | postCSS | minify).Content | safeCSS }} </style>
{{ end }}

It’s a little ugly as you’ve got styling in your head tag, but whatever. It works.