Forwarding a SASS Map of variables

711 Views Asked by At

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?

1

There are 1 best solutions below

0
Kerry Johnson On

When I placed @debug meta.module-variables('variables'); into module.scss it outputted the following (your values will be slightly different as I had to fill in the missing variable blanks):

module.scss:5 Debug: ("theme-colors": ("primary": "blue", "secondary": "gray", "success": "green", "info": "cyan", "warning": "yellow", "danger": "red", "light": "gray", "dark": "gray"))

That reminded me that $theme-colors was a Sass map, in which case you would retrieve the "light" value like so:

.some-style {
   color: map.get(variables.$theme-colors, 'light');
}