因此，我正在编写一个主题为浅色（默认）和深色的Web应用程序。我根据本文如何在Sass中创建暗模式使用SCSS。我可以创建明暗，也可以创建多个主题。但是我必须实现这样的目标。
这是场景：
在文章中提到的解决方法中，我有一个问题，如果我没有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如果密钥不存在，有什么办法可以写使用默认值？
是的，您可以通过if条件获得想要的东西。首先，将默认主题存储在变量中：
$default-theme: map-get($themes, default);
然后，在您的函数中t，使用内置函数map-has-key检查该键是否存在，并使用结果通过三元运算符选择所需的主题图：
@function t($key) {
$key-exists: map-has-key($theme-map, $key);
@return map-get(if($key-exists, $theme-map, $default-theme), $key);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句