Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
executable file 54 lines (41 sloc) 2.17 KB
title description date publishdate lastmod categories keywords menu weight sections_weight draft
SASS / SCSS
Hugo Pipes allows the processing of SASS and SCSS files.
2018-07-14
2018-07-14
2018-07-14
asset management
docs
parent weight
pipes
30
2
2
false

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] {{< new-in "0.80.0" >}}

: The transpiler to use, valid values are libsass (default) and dartsass. Note that the Embedded Dart Sass project is still in beta. We will try to improve the installation process when it has stable releases, but if you want to use Hugo with Dart Sass you need to download a release binary from Embedded Dart Sass (Hugo after 0.81.0 requires beta 6 or newer) 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.

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.

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 %}}