转发变量的 SASS 映射答案

【问题标题】：Forwarding a SASS Map of variables转发变量的 SASS 映射
【发布时间】：2022-11-02 02:30:58
【问题描述】：

我首先会说我不确定这是否可能。我仍在进一步了解 SASS 的深度。
本质上，我想做的只是转发 sass 模块的一部分。我知道我可以使用show 转发模块的部分内容，但是我想转发很多内容，而且列表可能会很长。我要转发的模块上有一张地图，其中包含我要转发的所有变量，因此我尝试转发地图，但它似乎不起作用。
具体情况，我在我的元素上使用 ShadowDOM（这意味着不应用全局样式），并使用 bootstrap (v5) 作为我的样式框架。 bootstrap 文件中有一些特定的变量可以用于我的自定义元素，因此我创建了一个名为 variables.scss 的模块，它试图仅从 bootstrap 转发 $theme-colors 变量。 $theme-colors 是一个包含所有变量的地图，所以在我的脑海中，我应该能够通过引用地图来显示这些变量，但是唉，它不起作用。
这里有一些sn-ps：

//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;
}

萨斯输出：

messageOriginal：未定义的变量。
颜色：变量.$light

希望这是足够的细节。转发 scss 模块时，有没有办法可以使用地图仅显示地图的内容？

【问题讨论】：

标签： css twitter-bootstrap sass sass-modules

【解决方案1】：

当我将@debug meta.module-variables('variables'); 放入module.scss 时，它输出以下内容（您的值会略有不同，因为我必须填写缺失的变量空白）：

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

这提醒了我$theme-colors 是一个 Sass 映射，在这种情况下，您可以像这样检索“light”值：

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

【讨论】：