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 not be treated as a quoted string.

For example:

@use "hugo:vars" as h;

h1 {
  font-size: h.$font-size-h1;
}

h2 {
  font-size: h.$font-size-h2;
}

{{ $vars := dict
  "font_size_h1" ("72px * 0.500" | css.Unquoted)
  "font_size_h2" ("72px * 0.375" | css.Unquoted)
}}

{{ with resources.Get "sass/main.scss" }}
  {{ $opts := dict
    "enableSourceMap" hugo.IsDevelopment
    "outputStyle" (cond hugo.IsDevelopment "expanded" "compressed")
    "targetPath" "css/main.css"
    "transpiler" "dartsass"
    "vars" $vars
  }}
  {{ with . | toCSS $opts }}
    {{ if hugo.IsDevelopment }}
      <link rel="stylesheet" href="{{ .RelPermalink }}">
    {{ else }}
      {{ with . | fingerprint }}
        <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

The Sass rules are transpiled to:

h1 {
  font-size: 36px;
}

h2 {
  font-size: 27px;
}