css.Unquoted

When passing a vars map to the css.Sass function, Hugo detects common typed CSS values such as 24px or #FF0000 using regular expression matching. If necessary, you can bypass automatic type inference by using the css.Unquoted function to explicitly indicate that the value must be treated as an unquoted string.

In the example below, we use css.Unquoted to ensure the value for the font-family property is injected without quotes.

{{ $vars := dict
  "font-main" ("sans-serif" | css.Unquoted)
}}

{{ $opts := dict "vars" $vars "transpiler" "dartsass" }}
{{ with resources.Get "sass/main.scss" | css.Sass $opts }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

Using the hugo:vars identifier in your stylesheet:

@use "hugo:vars" as h;

body {
  font-family: h.$font-main;
}

The resulting CSS contains an unquoted string:

body {
  font-family: sans-serif;
}