Sass 从源映射键创建类名

我得到一个错误，说（'background-color'：#333）不是有效的css。我试图获得要附加到.body的主题名——对于每个主题（目前只有一个主题）。在我看来，这个错误似乎是试图将主题名的内容添加到.body中，而不仅仅是它的标题

$themes: (
    'dark': (
        'background-color': #333
    ),
);

@each $theme-name in $themes {
    .body--#{$theme-name} {
        & .container {
            background-color: map-get($theme-name, background-color);
        }
    }
}

我试图得到：

.body--dark {}
.body--dark .container {background-color: #333}

---

谢谢

问题出在您的每个语句中。您只获得贴图值，而不是键和值

$themes: (
    'dark': (
        'background-color': #333
    ),
);

// get the key and the value in two separate variables: first variable is the key, second one the value
@each $theme-name, $theme-config in $themes {
    .body--#{$theme-name} {
        .container {
            background-color: map-get($theme-config, 'background-color');
        }
    }
}

请注意，嵌套选择器不需要

和
。这只是默认行为。仅对伪类、串联类名、聚合类名和其他一些奇怪的选择器用法使用
&
。检查我关于这张便条的回答