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.

1 Like
3

Thank you.

4

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

{{ $classes := slice
  (printf "kind-%s" .Kind)
  (printf "type-%s" .Type)
}}
<body class="{{ delimit $classes " " }}">

On the home page, the body element is rendered as:

<body class="kind-home type-page">

On posts/post-1/, the body element is rendered as:

<body class="kind-page type-posts">

Then add specificity to your rules as needed.

You can also target a particular page by adding an id attribute to the body element.

{{ $classes := slice
  (printf "kind-%s" .Kind)
  (printf "type-%s" .Type)
}}

{{ $path := "" }}
{{ with .File }}
  {{ $path = .Path }}
{{ else }}
  {{ $path = .Path }}
{{ end }}
{{ $id := print "h" (substr (sha256 $path) 0 7) }}

<body class="{{ delimit $classes " " }}" id="{{ $id }}">

Producing something like:

<body class="kind-home type-page" id="h24a58f3">

This is a bit fragile, because the id will change if you rename a file or directory in the content path.

1 Like
5

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