mirrors/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2025-04-26 21:51:02 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

tocss: Add vars option

Browse source 
This commit adds a new `vars` option to both the Sass transpilers (Dart Sass and Libsass).

This means that you can pass a map with key/value pairs to the transpiler:

```handlebars
{{ $vars := dict "$color1" "blue" "$color2" "green" "$font_size" "24px" }}
{{ $cssOpts := (dict "transpiler" "dartsass" "outputStyle" "compressed" "vars" $vars ) }}
{{ $r := resources.Get "scss/main.scss" |  toCSS $cssOpts }}
```

And the the variables will be available in the `hugo:vars` namespace. Example usage for Dart Sass:

```scss
@use "hugo:vars" as v;

p {
    color: v.$color1;
    font-size: v.$font_size;
}
```

Note that Libsass does not support the `use` keyword, so you need to `import` them as global variables:

```scss
@import "hugo:vars";

p {
    color: $color1;
    font-size: $font_size;
}
```

Hugo will:

* Add a missing leading `$` for the variable names if needed.
* Wrap the values in `unquote('VALUE')` (Sass built-in) to get proper handling of identifiers vs other strings.

This means that you can pull variables directly from e.g. the site config:

```toml
[params]
[params.sassvars]
color1 = "blue"
color2 = "green"
font_size = "24px"
image = "images/hero.jpg"
```

```handlebars
{{ $vars := site.Params.sassvars}}
{{ $cssOpts := (dict "transpiler" "dartsass" "outputStyle" "compressed" "vars" $vars ) }}
{{ $r := resources.Get "scss/main.scss" |  toCSS $cssOpts }}
```

Fixes #10555
This commit is contained in:
Bjørn Erik Pedersen 2022-12-19 18:49:02 +01:00
parent 9a215d6950
commit 41a080b268
7 changed files with 218 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

7
resources/resource_transformers/tocss/scss/tocss.go
View file

@ -31,6 +31,7 @@ import (
"github.com/gohugoio/hugo/hugofs"
"github.com/gohugoio/hugo/media"
"github.com/gohugoio/hugo/resources"
"github.com/gohugoio/hugo/resources/resource_transformers/tocss/internal/sass"
)
// Used in tests. This feature requires Hugo to be built with the extended tag.
@ -63,11 +64,17 @@ func (t *toCSSTransformation) Transform(ctx *resources.ResourceTransformationCtx
}
}
varsStylesheet := sass.CreateVarsStyleSheet(options.from.Vars)
// To allow for overrides of SCSS files anywhere in the project/theme hierarchy, we need
// to help libsass revolve the filename by looking in the composite filesystem first.
// We add the entry directories for both project and themes to the include paths list, but
// that only work for overrides on the top level.
options.to.ImportResolver = func(url string, prev string) (newUrl string, body string, resolved bool) {
if url == sass.HugoVarsNamespace {
return url, varsStylesheet, true
}
// We get URL paths from LibSASS, but we need file paths.
url = filepath.FromSlash(url)
prev = filepath.FromSlash(prev)