SCSS Variables are not used as expected

Help
1

Hi,
I’m trying to make use of Sass in my jekyll website, particularly for holding color palettes, but the variables are not being translated when jekyll build is executed.

In the file /_sass/_theme.scss, I have the following:

$d-primary: #D0BCFF;
$d-primary-a: rgba(208, 188, 255, 0.555);
$d-primary-t: rgba(102, 80, 164, 0.555);
$d-on-primary: #381E72;
// snip

Then, in my /assets/css/pre.scss:

---
---
@use "theme" as t;
:root, [data-theme="dark"] {
	--primary: t.$d-primary;
	--primary-a: t.$d-primary-a;
	--primary-t: t.$d-primary-t;
	--on-primary: t.$d-on-primary;
        //  snip
}
// snip

I have also tried importing the variables in a manner similar to the jekyll docs for the sass-converter plugin, with @import, and dropping the t., but it makes no difference, and I consistently get a pre.css output along these lines (jekyll build):

:root, [data-theme=dark] {
  --primary: t.$d-primary;
  --primary-a: t.$d-primary-a;
  --primary-t: t.$d-primary-t;
  --on-primary: t.$d-on-primary;
  /* snip */
}
/* snip */

Note that @import or @use is never in the output pre.css, so some processing is certainly happening, and an error will be raised if the stylesheet used in either of those is invalid.

If someone has some advice or I’ve missed something real obvious, let me know! Thanks

EDIT: also, here is the output of jekyll build, no errors are given.

PS C:\(snip)> jekyll build --trace
Configuration file: C:/(snip)/_config.yml
            Source: C:/(snip)
       Destination: C:/(snip)/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
         AutoPages: Disabled/Not configured in site.config.
        Pagination: Complete, processed 1 pagination page(s)
       Jekyll Feed: Generating feed for posts
                    done in 0.457 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
2

Hey everyone, apologies if someone already started writing up an answer for this already haha, I found out why this doesnt work. Not jekyll’s fault, but something in SCSS’s syntax.

See this part of Sass’ documentation

TLDR: If a Sass expression is part of a CSS custom property, you must wrap it in #{}.

edit: that said, it would be really good if sass could pass along this in a compiler error, rather than saying nothing!