Does anybody know how I can use values that I have passed to a sass module (like shown below) inside another sass module that is not in the same scope but uses the module with @use?
I have a project where Sass modules are used in different files that don't always have the same styles.scss as a base. In fact I include our "core" via npm as a node module.
The core has a _core.scss file, and for every core-component a folder with at least 2 files. aA _config.scss file and a _functions.scss file and sometimes a _mixins.scss and a _generate.scss.
here is an example of the _core.scss:
@forward "colors/config";
@forward "colors/functions";
and the colors _config.scss file looks like this:
$colors: (
"primary": #8fc5de,
"secondary": #f25116,
"accent": #bcd955,
) !default;
and the _functions.scss like this:
@use "sass:map";
@use "config" as colors-cfg;
@function color($color-name) {
@if map.has-key(colors-cfg.$colors, $color-name) {
@return var(--adm-color-#{$color-name});
} @else {
@return var(--adm-color-unknown);
}
}
In the project we have 2 specific areas:
- the sass folder, where we create all global stylings for the project itself
- the components folder, where we style some components who can be used as webcomponents with a shadow dom (optional)
Example of styles.scss in the sass folder
@use "config" as adm-cfg;
@use "nodemodulespath/core/core" as adm;
and the config file:
@use "nodemodulespath/core/colors/config" as colors-cfg with (
$colors: (
"primary": #f59e4b,
"secondary": #f25116,
"accent": #bcd955,
"othercolor": #383723,
)
);
So far so good.
Now I want to use the colors with my color function inside the header.style.scss file. And here I have some problems with the values of the config.
Example:
@use "nodemodulespath/core/core" as adm;
.h1 {
color: adm.color("othercolor");
}
I can't use "othercolor" which i have added to the $colors map in _config.scss inside my color() function. I can only access the colors that are initially added inside the colors config from the core.
Inside the sass Folder i can access everything fine.
Any ideas how i can fix this? I already tried to pass new config values inside of header.style.scss like so:
@use "nodemodulespath/core/colors/config" as colors-cfg with (
$colors: (
"primary": #f59e4b,
"secondary": #f25116,
"accent": #bcd955,
"othercolor": #383723,
)
);
@use "nodemodulespath/core/core" as adm;
.h1 {
color: adm.color("othercolor");
}
But then I get the sass error that I can use the with() option just once. Would be super cool if someone with a deeper understanding of the sass module system can help me with this one.
thank you!
