mirror of
https://github.com/gohugoio/hugo.git
synced 2026-09-03 12:12:37 +00:00
Bjørn Erik Pedersen
74 lines
1.8 KiB
Markdown
74 lines
1.8 KiB
Markdown
---
|
|
title: css.Quoted
|
|
description: Returns the given string, setting its data type to indicate that it must be quoted when used in CSS.
|
|
categories: []
|
|
keywords: []
|
|
params:
|
|
functions_and_methods:
|
|
aliases: []
|
|
returnType: css.QuotedString
|
|
signatures: [css.Quoted STRING]
|
|
---
|
|
|
|
<!-- Added in v0.111.0 -->
|
|
|
|
> [!note]
|
|
> 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.Quoted` function to explicitly indicate that the value must be treated as a quoted string.
|
|
|
|
For example:
|
|
|
|
```scss {file="assets/sass/main.scss"}
|
|
@use "hugo:vars" as h;
|
|
|
|
ol li::after {
|
|
content: h.$ol-li-after;
|
|
}
|
|
|
|
ul li::after {
|
|
content: h.$ul-li-after;
|
|
}
|
|
```
|
|
|
|
```go-html-template {file="layouts/_partials/css.html"}
|
|
{{ $vars := dict
|
|
"ol_li_after" ("6" | css.Quoted )
|
|
"ul_li_after" ("7" | css.Quoted )
|
|
}}
|
|
|
|
{{ 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 code is transpiled to:
|
|
|
|
```css {file="public/css/main.css"}
|
|
ol li::after {
|
|
content: "6";
|
|
}
|
|
|
|
ul li::after {
|
|
content: "7";
|
|
}
|
|
```
|
|
|
|
[`css.Sass`]: /functions/css/sass/
|
|
[`vars`]: /functions/css/sass/#vars
|