Is it possible to add hugo if conditionals in scss files?

support
1

Hello there!
I’d like to show a border on the nav and footer of the first page without showing it on other pages, is it possible to have add a conditional e.g.

.site-header {
{{ if .IsHome }}border-bottom: 1px solid $color-gray-100;{{ end }}
margin-bottom: 3.33333em;
padding-bottom: 1em;
padding-top: 1em;

@media only screen and (min-width: 601px) {
margin-bottom: 5em;
}
}

or

{{ if .IsHome }}
site-header {
border-bottom: 1px solid $color-gray-100;
margin-bottom: 3.33333em;
padding-bottom: 1em;
padding-top: 1em;

@media only screen and (min-width: 601px) {
margin-bottom: 5em;
}
}
{{ end }}

I know it’s a stupid question but I’d like to see if it’s possible as I’ve done it with inline CSS before.

2

Conditionally add an extra border class for those elements in the (likely baseof.html) template.

3

Thank you.

4

To keep the CSS out of your templates, you can do this in baseof.html:

{{ $class := printf "kind-%s section-%s type-%s" .Kind .Section .Type }}
{{ $id := print .Language.Lang .Path | hash.XxHash | print "h-" }}
<body class="{{ $class }}" id="{{ $id }}">

This produces something like:

<body class="kind-page section-posts type-posts" id="h-4828a58ff0eea990">

Then add specificity to your rules as needed.

Note that the id attribute is a bit fragile; it will change if you modify the content path (e.g., renaming about.md to about-us.md).

The id atttribute will not change if you modify the permalink by:

  • Setting slug in front matter
  • Setting url in front matter
  • Defining a permalink pattern in your site configuration
  • Changing the baseURL in your site configuration
  • Enabling uglyURLs in your site configuration
  • Enabling removePathAccents in your site configuration
  • Enabling disablePathToLower in your site configuration