Using a data file for SCSS variables

support
4

It looks like you cannot use the ExecuteAsTemplate method on a Sass resource that will later be imported by another Sass file.

But you can do this…

data/settings.yml

transitions:
  fast_transition: 0.2
  slow_transition: 0.8

assets/sass/main.scss

// Set variables.
$fast: {{ .Site.Data.settings.transitions.fast_transition }}s;
$slow: {{ .Site.Data.settings.transitions.slow_transition }}s;
$anim-fast: $fast ease-in-out;
$anim-slow: $slow ease-in-out;

// Import.
@import "foo"

assets/sass/_foo.scss

.something {
  transition: width $anim-fast;
}

layouts/_default/baseof.html

{{ $scss := resources.Get "sass/main.scss" }}
{{ $scss = $scss | resources.ExecuteAsTemplate "main.scss" . }}
{{ $css := $scss | toCSS }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
2 Likes