从源映射键创建类名

【问题标题】：Creating class names from source map keys从源映射键创建类名
【发布时间】：2018-06-09 06:25:07
【问题描述】：

我收到一条错误消息，提示 ('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}

谢谢

【问题讨论】：

标签： sass

【解决方案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 上查看我对此注释的回答。

【讨论】：