Question

我收到一条错误消息（'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}

由于

Answer 1

问题出在您的@each声明中。您只获取地图值，而不是键和值。

$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');
        }
    }
}

注意，嵌套选择器不需要&。这只是默认行为。仅将&用于伪类，连接类名，聚合类名和一些其他奇怪的选择器用法。请在此other question上查看关于此说明的答案。

从源映射键创建类名

1 个答案: