hugo/content/en/functions/css/Quoted.md

title, description, categories, keywords, params

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

Note

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

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.Quoted function to explicitly indicate that the value must be treated as a quoted string.

For the css.Build function, use css.Quoted to explicitly indicate that a value must be treated as a quoted string, most commonly for font-family names or the content property.

In the example below, we use css.Quoted to ensure the values for the content property are injected as strings.

{{ $vars := dict
  "ol-li-after" ("6" | css.Quoted)
  "ul-li-after" ("7" | css.Quoted)
}}

{{ $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;

ol li::after {
  content: h.$ol-li-after;
}

ul li::after {
  content: h.$ul-li-after;
}

The resulting CSS contains quoted strings:

ol li::after {
  content: "6";
}

ul li::after {
  content: "7";
}