phoenix/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2024-07-13 20:38:00 +00:00
Code Issues Packages Projects Releases Wiki Activity
hugo/content/en/hugo-pipes/scss-sass.md
Bjørn Erik Pedersen ef6f101e75 Squashed 'docs/' changes from 2c0125b52..1214f6ffb 
1214f6ffb Document cleanDestinationDir configuration setting
27ca65463 Clarify .Page.Param method (#1953)
3fa1792d2 Document the usage of `hardWrap` option for markdown rendering (#1951)
8b5afdfb4 Update theme
207e7f0a0 fix docs for getting remote font
1f7094b9e Correct typo
f9d6445c4 Added missing `/` in URL generator (#1946)
3a22ee7d6 Remove translations
b3b900f3f Update introduction.md
aca440052 rm Forestry - facing end-of-life shortly (#1944)
af0014e14 Update scss-sass.md
1c43bbbc9 Merge branch 'docs/goworkspace'
d034175ca netlify: Hugo 0.109.0
d3a6a5c3f Merge branch 'tempv0.109.0'
e033dbead docs: Regen docs helper JSON
452bf675c resource/page: Add Page.Ancestors
12edd7363 Add some docs for workspaces
8f0fcba6b Add HUGO_PUBLISHDIR to the Node environment
4e66d98ad Update theme
808aee6f6 config: Update to ga v4
1de2bc5a9 config: Update to ga v4
ddb5fd6b0 Merge commit '41bc6f702aa54200530efbf4267e5c823df3028d'
54c54bf76 modules: Adjust watch logic vs workspace use definitions

git-subtree-dir: docs
git-subtree-split: 1214f6ffbf680e853746aaeb6cb097b28c0c556b
2023-01-17 12:51:01 +01:00

2.3 KiB
Executable file
Raw Blame History

title description date publishdate categories keywords menu weight sections_weight
Sass / SCSS Hugo Pipes allows the processing of Sass and SCSS files. 2018-07-14 2018-07-14
asset management
docs
parent weight
pipes 30
02 02

Any Sass or SCSS file can be transformed into a CSS file using resources.ToCSS which takes two arguments, the resource object and a map of options listed below.

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}

Options

transpiler [string]

The transpiler to use, valid values are libsass (default) and dartsass. If you want to use Hugo with Dart Sass you need to download a release binary from Embedded Dart Sass and make sure it's in your PC's $PATH (or %PATH% on Windows).

targetPath [string]
If not set, the resource's target path will be the asset file original path with its extension replaced by .css.
vars [map]
Map of key/value pairs that will be available in the hugo:vars namespace, e.g. with @use "hugo:vars" as v; or (globally) with @import "hugo:vars"; {{< new-in "0.109.0" >}}
outputStyle [string]
Default is nested (LibSass) and expanded (Dart Sass). Other available output styles for LibSass are expanded, compact and compressed. Dart Sass only supports expanded and compressed.
precision [int]
Precision of floating point math. Note: This option is not supported by Dart Sass.
enableSourceMap [bool]
When enabled, a source map will be generated.
sourceMapIncludeSources [bool]
When enabled, sources will be embedded in the generated source map. (Dart Sass only). {{< new-in "0.108.0" >}}
includePaths [string slice]
Additional SCSS/Sass include paths. Paths must be relative to the project directory.
{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules/myscss")) }}
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}

{{% note %}} Setting outputStyle to compressed will handle Sass/SCSS files minification better than the more generic [resources.Minify]({{< ref "minification">}}). {{% /note %}}