Sass doesn't compile variables properly

Question

I start to write my own SCSS along with boostrap. I follow the hierarchy of the framework like:

/* The main file and all partial files are in the same directory */
@import "variables";
@import "mixins";

@import "other-components";

Everything compiles perfectly except that every variable from variables.scss is not compiled. From my understanding, CSS doesn't have variables except for :root, so SCSS variables will be compiled directly to its value in CSS. But when it's done compiling, the variables in CSS remain the same as they're in SCSS, just name like --primary but not value like #000.

Before my post gets slammed as duplicate, here's what I've done:

1. I've followed Bootstrap's practice. You can check them on Github.
2. I use VSCode and my colors have boxes right next to them, so I've written valid hex values;
3. I've tried to switch to @use and use as namespace instead of @import.
4. I've tried to rename my variables file with and without underscore _ back and forth. It doesn't help solve the problems.
5. The compiler shows no error whatsoever.
6. I only use sass package to compile .scss to .css. No extra libraries.

main.scss

_variables.scss

main.css

Any help is appreciated!

Answer 1

When using standard CSS variables, you should make SASS write out the contents like this:

--variable: #{$sass-var};

Otherwise SASS will print the variable as if it's a valid value inside a CSS value (since you could technically define something like --var: $text and then use it later with content: var(--var) to print out that string). Anyways, it's because SASS otherwise doesn't know if you want to print the output of the variable, or just a string named similar to a sass variable.