SASS Modules: How to use the same module-config values in different sass modules and projects

Viewed 113

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:

  1. the sass folder, where we create all global stylings for the project itself
  2. the components folder, where we style some components who can be used as webcomponents with a shadow dom (optional)

enter image description here

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!

0 Answers
Related