I'll start of by saying I'm not sure if this is possible or not. I'm still learning more about the depths that SASS goes.
Essentially, what I'm trying to do is forward just parts of a sass module. I know I can forward parts of a module with show, but there are multiple things I'd like to forward, and the list can get lengthy. There's a map on the module I'm trying to forward that contains all the variables I'm trying to forward, and so I've tried to forward the map, but it doesn't seem to work.
Specific case, I'm using ShadowDOM on my elements (which means global styles aren't applied), and bootstrap (v5) as my style framework. There are specific variables inside the bootstrap file that I want to have available to my custom elements, so I've created a module called variables.scss that tries to forward just the $theme-colors variables from bootstrap. $theme-colors is a map that contains all the variables, so in my head I should be able to show just those variables by referencing the map, but alas, it does not work.
Here are some snippets:
//bootstrap.scss
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
//variables.scss
@forward './bootstrap' show $theme-colors;
//module.scss
@use './variables';
.some-style {
color: variables.$light;
}
Sass output:
messageOriginal: Undefined variable.
color: variables.$light
Hopefully that's enough details. Is there a way I can use a map to show just the contents of the map when forwarding scss modules?
When I placed
@debug meta.module-variables('variables');intomodule.scssit outputted the following (your values will be slightly different as I had to fill in the missing variable blanks):That reminded me that
$theme-colorswas a Sass map, in which case you would retrieve the "light" value like so: