css.Unquoted

Returns the given string, setting its data type to indicate that it must not be quoted when used in CSS.

Syntax

css.Unquoted STRING

Returns

css.UnquotedString

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

When 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:

assets/sass/main.scss

@use "hugo:vars" as h;

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

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

layouts/_partials/css.html

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

public/css/main.css

h1 {
  font-size: 36px;
}

h2 {
  font-size: 27px;
}

Last updated: December 11, 2025 : content: Document additional functions (d706a013d)

Improve this page