Can I use variables across SCSS files?

Question

I'm using different 'SCSS variables files' (bootstrap variables, company variables, project variables) so it's easy to re-use them in other projects. But it seems I can't use variables across files.

Example:

• In company-variables.scss I declared $white: #fff;
• In project-variables.scss I want to reuse the above variable like this $body-color: darken($white, 20%);
• I get the following error: Undefined variables: "$white". $body-color: darken($white, 20%); Undefined variables: "$white". $body-color: darken($white, 20%);

I load my files like this:

@import "bootstrap-variables";
@import "company-variables";
@import "project-variables";

Paths are correct.

I'm pretty new to SCSS. Any idea what I'm doing wrong or is this not possible/not the way to go?

Answer 1

If you want to use it, you should import @import "company-variables"; into @import "project-variables";

Or just use default white color from bootstrap like that: darken(theme-color("white"), 20%);