diff options
Diffstat (limited to 'docs/content/en/hugo-pipes/transpile-sass-to-css.md')
| -rw-r--r-- | docs/content/en/hugo-pipes/transpile-sass-to-css.md | 23 |
1 files changed, 13 insertions, 10 deletions
diff --git a/docs/content/en/hugo-pipes/transpile-sass-to-css.md b/docs/content/en/hugo-pipes/transpile-sass-to-css.md index b09cc165b..7ddbe573d 100644 --- a/docs/content/en/hugo-pipes/transpile-sass-to-css.md +++ b/docs/content/en/hugo-pipes/transpile-sass-to-css.md @@ -7,9 +7,13 @@ keywords: [] menu: docs: parent: hugo-pipes + returnType: resource.Resource weight: 30 weight: 30 -signatures: ["resources.ToCSS RESOURCE [OPTIONS]", "toCSS RESOURCE [OPTIONS]"] +action: + aliases: [toCSS] + returnType: resource.Resource + signatures: ['resources.ToCSS [OPTIONS] RESOURCE'] toc: true aliases: [/hugo-pipes/transform-to-css/] --- @@ -19,8 +23,8 @@ aliases: [/hugo-pipes/transform-to-css/] Transpile Sass to CSS using the LibSass transpiler included in Hugo's extended edition, or [install Dart Sass](#dart-sass) to use the latest features of the Sass language. ```go-html-template -{{ $options := dict "transpiler" "libsass" "targetPath" "css/style.css" }} -{{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint }} +{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }} +{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }} <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} ``` @@ -30,7 +34,6 @@ Sass has two forms of syntax: [SCSS] and [indented]. Hugo supports both. [scss]: https://sass-lang.com/documentation/syntax#scss [indented]: https://sass-lang.com/documentation/syntax#the-indented-syntax - ## Options transpiler @@ -39,7 +42,7 @@ transpiler targetPath : (`string`) If not set, the transformed resource's target path will be the original path of the asset file with its extension replaced by `.css`. -vars {{< new-in "0.109.0" >}} +vars {{< new-in 0.109.0 >}} : (`map`) A map of key/value pairs that will be available in the `hugo:vars` namespace. Useful for [initializing Sass variables from Hugo templates](https://discourse.gohugo.io/t/42053/). ```scss @@ -59,21 +62,21 @@ precision enableSourceMap : (`bool`) If `true`, generates a source map. -sourceMapIncludeSources {{< new-in "0.108.0" >}} +sourceMapIncludeSources {{< new-in 0.108.0 >}} : (`bool`) If `true`, embeds sources in the generated source map. Not applicable to LibSass. includePaths : (`slice`) A slice of paths, relative to the project root, that the transpiler will use when resolving `@use` and `@import` statements. ```go-html-template -{{ $options := dict +{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" "vars" site.Params.styles "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules/bootstrap/scss") }} -{{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint }} +{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }} <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} ``` @@ -187,8 +190,8 @@ command = """\ To transpile with Dart Sass, set `transpiler` to `dartsass` in the options map passed to `resources.ToCSS`. For example: ```go-html-template -{{ $options := dict "transpiler" "dartsass" "targetPath" "css/style.css" }} -{{ with resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint }} +{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }} +{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }} <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> {{ end }} ``` |