DESIGN SYSTEM

  • Principles
  • Components
  • Documentation
ASSET MANAGEMENT

SASS / SCSS

Hugo Pipes allows the processing of SASS and SCSS files.

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

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. Other available output styles are expanded, compact and compressed.
precision [int]
Precision of floating point math.
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" true "includePaths" (slice "node_modules/myscss")) }}
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}

Setting outputStyle to compressed will handle SASS/SCSS files minification better than the more generic resources.Minify.

  • Foundation styles (FS)
  • Content text (CT)
  • Buttons and links (BL)
  • Form elements (FE)
  • Icons (IC)
  • Miscellaneous (MS)
“SASS / SCSS” was last updated: August 23, 2018: Add note about outputStyle compressed (ebf1da97)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • Discuss Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays

 
  Hugo Sponsors
Logo for Forestry.io
Logo for Linode
Logo for eSolia
 

The Hugo logos are copyright © Steve Francia 2013–2019.

The Hugo Gopher is based on an original work by Renée French.

  • Principles
  • Components
  • Documentation
  • Foundation styles (FS)
  • Content text (CT)
  • Buttons and links (BL)
  • Form elements (FE)
  • Icons (IC)
  • Miscellaneous (MS)