Oh great. I’m glad you figured it out on your own. You also might want to check out safeCSS for future reference and w/r/t Go templates escaping what it sees as potentially “unsafe” strings. HTH 
1 Like
Thanks! Obviously embarrassing to admit for posterity, especially on my first post, but that’s how we learn, or something! 
1 Like
Also see:
1 Like
I don’t quite understand the example given:
Of course, 0.20 also made it super-easy to create external CSS stylesheets based on your site and page configuration. A simple example:
Add “CSS” to your home page’s outputs list, create the template /layouts/index.css using Go template syntax for the dynamic parts, and then include it into your HTML template with:
{{ with .OutputFormats.Get "css" }}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{ end }}`
What’s happening here? Is it making a CSS file on build that will then be used by the site in public? Or … what use-case would one have to output a css file? This is intriguing but I don’t understand the why.
1 Like
CSS is useful for styling your HTML.
@bep That is a ridiculous reply
@everyone else:
This has nothing to do with output formats or any of that goofy nonsense. This is a brain dead simple method to use template variables in CSS styles, That’s it.
The more you try to talk about other things which may or may not supplant this, all you’ll do is further your confusion.
Either use output formats (which is again, ridiculous here and totally needless) or use this method.
Really. It’s brain dead simple. There is nothing complicated about this.
Please don’t convolute or highjack the thread. If you wish to discuss output formats, please make a different thread. Thank you.
If I wanted this thread to be a query/question, I would have used a “question mark” instead of an “exclamation point”!
The purpose of this thread is not discussion into every single possible method of how to do this. It’s about what I’ve done and this works perfectly for me, and I have no need or desire to mess w/ any other method on my personal sites/blogs.
Other than that, feel free to do as you like.
I just wanted to clarify all this.
P.S. The reason is b/c I’m lazy and I don’t feel like dealing with multiple files, multipe directives across multiple directory locations. That’s just annoying. And I’m no sure i fyou can tell, but I’m slightly irritable. 
Well, it was in line with the question, and you should look at your own answer before you pick on others.
Of course there are valid use cases for using the output format. A dummy example would be to create one CSS per section based on the site configuration and the section’s pages and… Whatever. Plenty of use cases that would not be possible without “custom output formats” etc. Use your imagination.
1 Like
“CSS is useful for styling your HTML.”
Look I don’t want to argue. I see people giving non-answers on IRC all day. Let’s try to keep this forum clean of that, please. SMH
Output formats == complexity. Not interested. If there is a need, I’ll employ it. Right now I can change fonts using the main config file, where all my site config lives.
#HackThePlanet. Or don’t.
Sir, we get it, you’re contributing a lot, and you’re helping a lot, and running a lot of things, so don’t let that go to your head. This kind of thing happens a lot in IT circles, and it’s a really shitty psychology, I suggest and advise very sincerley to steer clear of it.
Shiva blesses. Peace.
1 Like
Your set of interests may not intersect with the rest of the Hugo world. Maybe something to think about before you belittle other people’s thoughts/ideas.
Ditto.
I don’t want to get in the middle of the argument here, but it seemed clear to me from my question that I knew what CSS is useful for. I was asking why one would make it an output format, as opposed to shortcode or something. Thinking through it a bit more I think I have a better grasp at why, even if it doesn’t seem common or useful in the general sense. Sorry for my lack of clarity.
2 Likes
0.43 added template support for resources with resources.ExecuteAsTemplate
So you can do something like this:
{{ $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”>
You could now reference a variable/param in your stylesheet like you would in a layout file:
{{ .Site.Params.container_size_wide | default "1100px" }}
Using within scss files requires a few extra steps. I wrote a more indepth tutorial on how to use Hugo template variables in SCSS/CSS here.
1 Like
But make note of this issue: https://github.com/gohugoio/hugo/issues/4936
But as long as you don’t use resources.Concat on these, you will be fine.
Stupid bug from me, is fixed – and I plan pushing a new “follow up” release with this and some other goodness tomorrow. Is Friday 13th and all. Must be a good sign
3 Likes
Also, changing variables in config.toml will trigger a full rebuild – so If you do lots of “tweaking” you will be happier doing it in the SCSS source directly; it will “hot reload” the CSS if that is the only change … and that feels like magic when it happens.
1 Like
Is it possible to use ExecuteAsTemplate with partial scss?
I’m having an absolute blast with this new release
1 Like
There is only one entry SCSS (or SASS) file, but the import resolution in SASS is pretty flexible. I don’t see how you cannot do just about anything from defining your variables in the entry file.
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
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! 
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
This one maybe related:
How To Dynamically Use Google Fonts In A Hugo Website
Go to https://fonts.google.com/ and select the font you want to use.
Click the + Sign
A box will pop open, showing you how to use the font.
Once you have picked out which font we want to use, we can edit our theme and make it use the fonts we want. We are going to use / as the project’s BASE_DIR.
/config.toml
[params]
fontbody = "Raleway"
fontheading = "Corben"
This file contains my partial layout for the < head > section of stoned.io
/themes/stoned.io/layouts/partial/head.html
<link href='//fonts.googleapis.com/css?family={{ .Site.Params.fontbody }}' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family={{ .Site.Params.fontheading }}' rel='stylesheet' type='text/css'>
If you are using another theme, or a CSS framework you might have other overriding font styles. So right before the < /head > closing tag, I would suggest putting a custom style tag and specify your font usage.
<style>
body {
font-family: '{{ replace .Site.Params.fontbody "+" " "}}';
}
h1, h2, h3,
h4, h5, h6 {
font-family: '{{ replace .Site.Params.fontheading "+" " "}}';
}
</style>
The reason why we are using
{{ replace .Site.Params.fontheading "+" " " }}
the replace function to replace any + sign with an empty space character, is because Google fonts specification uses + signs. So when you specify your fonts in config.toml, be sure to use the + signs and not spaces.
Source+Sans+Pro (this is the correct way to specify the font in config.toml)
This is the string that is used by Google for the < /head > tag, but for the stylesheet, you need to specify the font like this:
font-family: 'Source Sans Pro', sans-serif;
So we need to replace the + signs from “Source+Sans+Pro” with spaces. This is why the style tag is used.
I use the style tag right before the < /head > tag, so that this STYLE specification occurs last in the stylesheet cascade. This way, you can easily add all sorts of fonts. For example, you could add a custom font for the paragraph tag and/or another for the pre tag. Perhaps you’d like to use different fonts for diff sized headings? Easy. Just add the fonts you want to config.toml
/config.toml under the [params] and specify whatever Google fonts you want.
fontheading1 = ""
fontheading2 = ""
...
fontheading6 = ""
fontparagraph = ""
fontpre = ""
And now let’s configure the head section. You can even abstract this out into /theme/stoned.io/partial/google_fonts.html and then specify this in your /theme/stoned.io/partial/head.html to load the partial by doing
{{ partial "google_fonts.html" . }}
<style>
h1 {
font-family: '{{ replace .Site.Params.fontheading1 "+" " "}}';
}
h2 {
font-family: '{{ replace .Site.Params.fontheading2 "+" " "}}';
}
h3 {
font-family: '{{ replace .Site.Params.fontheading3 "+" " "}}';
}
h4 {
font-family: '{{ replace .Site.Params.fontheading4 "+" " "}}';
}
h5 {
font-family: '{{ replace .Site.Params.fontheading5 "+" " "}}';
}
h6 {
font-family: '{{ replace .Site.Params.fontheading6 "+" " "}}';
}
p {
font-family: '{{ replace .Site.Params.fontparagraph "+" " "}}';
}
pre {
font-family: '{{ replace .Site.Params.fontpre "+" " "}}';
}
</style>
You can also specify multiple Google Fonts in one line /themes/stoned.io/layouts/head.html
<link href='//fonts.googleapis.com/css?family={{ .Site.Params.fontbody }}|{{ .Site.Params.fontheading }}' rel='stylesheet' type='text/css'>
But I like to keep things separate for easy reading of the code.
Now all you have to do is change the font names in your config.toml and voila! Instantly you can stylize your entire Blog in a jiffy!
Feel free to play around w/ this idea and come up with whatever you want and don’t forget to share it with the community. Cheers folks! Happy developing. Hugo is fun!
1 Like
I do the above to usually to reduce calls to google fonts server. When you pick a google font, you get this:
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
I go to https://fonts.googleapis.com/css?family=Lato&display=swap in my browser, and I get a CSS file such as:
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
I use the Latin (not extended) and just grab one @font-face for every font I use on my website. Now I don’t have to make an extra call to google font server. It helps a bit in pagespeed stats. You can copy this font css rule to your own css file and then you don’t have to make
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
calls like this since it already exists in your css file.
Once I have this, I can go to my /layouts/partial/header.html, and right after I load my CSS files or maybe right before the tag and after any other styles have loaded:
<style>
body {
font-family: '{{ replace .Site.Params.font.body "+" " "}}';
}
blockquote {
font-family: '{{ replace .Site.Params.font.bq "+" " "}}';
font-size: 1.25em;
}
h1, h2, h3,
h4, h5, h6 , .panel-title {
font-family: '{{ replace .Site.Params.font.heading "+" " "}}';
/*font-weight: 800;*/
}
.dropdown a {
font-family: '{{ replace .Site.Params.font.nav "+" " "}}'
}
</style>
I like to control my fonts globally through config.toml instead of having to muck with the CSS files all the time.
config.toml looks like this: (I have a lot of fonts I try out like this)
[params.font]
# Domine Raleway "Gentium Basic" Lato
body = "Lato"
heading = "Merriweather"
nav = "PT Sans Narrow"
bq = "Caveat"
I hope this helps.
1 Like