hugo/docs/content/en/functions/css/Unquoted.md

title, description, categories, keywords, params

title	description	categories	keywords	params
css.Unquoted	Returns the given string, setting its data type to indicate that it must not be quoted when used in CSS.			functions_and_methods aliases returnType signatures css.UnquotedString css.Unquoted STRING

Note

This function is only applicable to the vars option passed to the css.Sass function.

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;
}