如果 scss 中的其他主题不存在某些变量，如何使用默认变量？

Question

所以我正在编写一个主题为浅色（默认）和深色的网络应用程序。我正在使用 SCSS as per this article How to Create a Dark Mode in Sass。我可以创造光明和黑暗，也可以创造多个主题。但我必须实现这样的目标。

场景如下：

我有一个问题，在文章中提到的解决方法中，如果我没有深色版本的 bg: $bg--light, 而只有默认版本，该怎么办。像这样

$themes: (
        default: (
                logo: url("../images/brand/logo_vertical.svg"),
                bg: $bg--light,
                text: $text--light,
        ),
        dark: (
                logo: url("../images/brand/logo_vertical--invert.svg"),
                text: $text--dark,
        ),
);

@mixin themed() {
  @each $theme, $map in $themes {
    .theme--#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function t($key) {
  @return map-get($theme-map, $key);
}

.base {
  @include themed() {
    color: t($text);
    background: t($bg);
  }
}

这给出了在黑暗中没有 bg: $bg--light, 的错误。如果 bg: $bg--light, 不存在黑暗或任何其他主题，我可以做些什么，它将使用默认主题。

这可能吗？怎么样？

如果密钥不存在，我有什么方法可以编写 if condition 以使用默认值。

Answer 1

是的，你可以通过 if 条件得到你想要的。首先，将默认主题存储在一个变量中：

$default-theme: map-get($themes, default);

然后，在您的函数 t 中，使用内置函数 map-has-key and use the result to select the desired theme map with a ternary 运算符检查密钥是否存在：

@function t($key) {
  $key-exists: map-has-key($theme-map, $key);
  @return map-get(if($key-exists, $theme-map, $default-theme), $key);
}

如果 scss 中的其他主题不存在某些变量，如何使用默认变量？

How to use default variable if some variable is not there for other theme in scss?

css

themes

sass

scss-mixins