Can't use config param in a css asset

support
1

I use a breakpoint in my css to switch layout, like this:

@media (width <= 604px) {

But I would this value to come from the config, like this:

@media (width <= {{ site.Params.breakpoint }}) {

But it doesn’t work. I have:

[params]
breakpoint = 604

and

@media (width <= {{ site.Params.breakpoint }}px) {

and it says:

Error: error building site: TOCSS-DART: failed to transform “css/main.scss” (text/x-scss): “/home/drm/WEBSITE/assets/css/main.scss:149:17”: Expected expression.

Obviously main.css is under assets/ and called with this:

{{ $opts := dict "transpiler" "dartsass" }}
{{- $styles := resources.Get "css/main.scss" | resources.ToCSS $opts | minify  }}
<link rel="stylesheet " href="{{ $styles.Permalink }}">
2

CSS is not part of the templating process. You could use CSS variables instead, I guess.

3

What do you mean, of course I can refer to global parameters in a css asset, I’ve done it before. I just can’t make it work here for some reason. CSS variables wouldn’t make sense since I never change the breakpoint at runtime. But on the other hand I also need it in a html template, hence the hugo parameter.

4

You can’t use CSS variables with media queries. CSS Custom Properties for Cascading Variables Module Level 1

So one way is to add the CSS into a style element in the HTML head. There you can access your site or page params.

I personally don’t like that, because it will cause your CSS to be kept muliple places. That’s the only way I can think of how it could work.

1 Like
5

Well, if it works “of course”, then there’s no problem, is there?

6

What is wrong with this:

{{ $opts := dict "transpiler" "dartsass" }}
{{ $styles := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "main.scss" . | toCSS $opts | minify }}
<link rel="stylesheet " href="{{ $styles.Permalink }}">

Error: error building site: render: 
failed to render pages: render of "page" failed: 
"/home/drm/WEBSITE/layouts/_default/baseof.html:3:9": execute of template failed: template: _default/single.html:3:9: executing "_default/single.html"
at <partial "docs/html-head" .>: error calling partial: "/home/drm/WEBSITE/layouts/partials/docs/html-head.html:13:56": execute of template failed: template: partials/docs/html-head.html:13:56: executing "partials/docs/html-head.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations
7

Basically, it should work that way.

Are you sure, your context given to executeAsTemplate is what you think it is?

Otherwise, using the search

Check if your main.scss file exists at this location, is valid and not minified before.

8 
{{ $opts := dict "transpiler" "dartsass" }}
{{ $styles := resources.Get "css/main.scss" | resources.ExecuteAsTemplate "main.scss" . | toCSS $opts | minify }}

thanks, I had kinda forgot where my own posts where to be honest. So… I’m not even sure what went wrong, the paths were wrong but were the same on both files… Whatever, I renamed css the scss directory and changed it on html-head.html, and now it works. Those functions are really, really tricky. Honestly, why aren’t all text files under assets/ templates by default ? Wouldn’t people put them under static/ unless we wanted to use some magic code ?

9

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