How to use Hugo Template variables in CSS!

support
40

Hi. I’ve been away for a while. My domain is active, but the blog is currently down. I can paste the original blog post here:

Using Hugo Template Variables in Hugo Stylesheets

965×438

Today I will show you a quick hack to be able to make CSS styles in Hugo, use Hugo variables available to templates and such.

Create

/themes/yourtheme/layouts/partials/css/css.html

with the following contents for example:

    <style>
        body {
             font-family: {{ .Site.Params.fontbody }};
        }
    </style>

Call this file right above the closing </head> tag, wherever your closing head tag may be.

{{ partial "css/css.html" . }}

Now whatever config variables you want to use, you can define them in

/config.toml

Voila! Now you can easily use Hugo template vars/data etc. inside hugo. It’s an ugly hack, but I like hacking. Once you define all your CSS, you all you have to do is modify your config.toml and you can make quick CSS changes.

This is NOT a substitution for CSS Pre Processors!

Now all you have to do is edit your styles in

/themes/yourtheme/layouts/partials/css/css.html

and you can use Hugo Template data and variables. The reason why we call this partial above the closing head tag is that this style will be the last one in the stylesheet cascade and would take precedence.

Enjoy folks! :slight_smile:

P.S. Yes. I know it’s a dirty hack. I know CSS pre processors are heavily advised. I know. It’s okay to do this too. There is nothing wrong with it. Do what you want, and that shall be the whole of the law.

1 Like