mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
e48ffb7635
ef9c4913c Clean up and removal of outdated examples 46122c9aa add godot tutorials to showcase 06d1d1ea2 Update scss-sass.md 1fc63c100 Spelling fix in 0.79.1 release notes ad2f50e3d Update plainwords description (#1296) 33021d451 Update substr examples (#1304) 6b1cc59bb Release 0.80.0 521db8c6d Merge branch 'tempv0.80.0' 58626c2b3 releaser: Add release notes to /docs for release of 0.80.0 f81d118af dartsass: Dart Sass only supports `expanded` and `compressed` 7da6f54be Add Dart Sass support b1f2661bb Replace jsconfig.js with jsconfig.json 38de0c1a4 Update index.md 223ceae80 Update index.md f7ac0e59d Release v0.79.1 2d4583d43 Merge branch 'temp791-2' 1d34e609b releaser: Add release notes to /docs for release of 0.79.1 e26769988 Merge branch 'temp791' 75694d904 Fix Resource.ResourceType so it always returns MIME's main type 0f65d7783 Typo s/adds/add (#1298) 0b896b2c0 images: Add images.Overlay filter 0d4257dcd Clarify documentation on shimming fcf601ddf Update index.html 6bf9bc1c1 Update index.html 1ce76bf3a Update index.html e7d976eec Update index.html db2996e64 Update index.html 245e5bfc9 news: Add post about Apple M1 3ad4115ed tpl: Add title parameter to YouTube shortcode 76ed976f8 Added two useful extensions to the list (#1243) e5a30dd11 Update related.md 25cf8f48b Improve substr examples e16e57e9a Update path.Split.md 2749b88fd Update path.Split.md d76cad3ff Release 0.79.0 f5ccfbe98 releaser: Add release notes to /docs for release of 0.79.0 ebf1b87b0 Merge commit '9f1265fde4b9ef186148337c99f08601633b6056' 1f1e8f39c Allow setting the delimiter used for setting config via OS env, e.g. HUGO_ e9b1414dd deps: Update to github.com/evanw/esbuild 0.8.11 to 0.8.14 0f76cf66c docs: Regen docshelper 1ada5d47e Add menu params 1c120aef0 Revert "docs: Regenerate docshelper" 7b60b5624 docs: Regenerate docshelper git-subtree-dir: docs git-subtree-split: ef9c4913cdcf95d62ec12d872f412f97e55a55ad
54 lines
2.2 KiB
Markdown
Executable file
54 lines
2.2 KiB
Markdown
Executable file
---
|
|
title: SASS / SCSS
|
|
description: Hugo Pipes allows the processing of SASS and SCSS files.
|
|
date: 2018-07-14
|
|
publishdate: 2018-07-14
|
|
lastmod: 2018-07-14
|
|
categories: [asset management]
|
|
keywords: []
|
|
menu:
|
|
docs:
|
|
parent: "pipes"
|
|
weight: 30
|
|
weight: 02
|
|
sections_weight: 02
|
|
draft: 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.
|
|
|
|
```go-html-template
|
|
{{ $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 (beta 5 at the time of writing). The release is scheduled for Q1 2021. We will try to improve the installation process by then, but if you want to use Hugo with Dart Sass you need to download a release binary from [Embedded Dart Sass](https://github.com/sass/dart-sass-embedded/releases) (beta 5) 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.
|
|
|
|
```go-html-template
|
|
{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "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 %}}
|