尝试使用 @each 函数编译地图的 CSS 时出现 Sass 错误

Question

我正在尝试创建一系列类来根据技能定义图像的样式。技能和相关颜色在地图中创建。

$skills-color: (
    default     : #D8D8D8,
    6           : #2E80EC,
    5           : #E0102A,
    8           : #164242,
    11          : #2D882D,
    10          : #F8E71C,
    9           : #2A1E4B,
    sales       : #00FFFF,
    7           : #2ECC32
);

它通过以下@each 运行

@each $skill, $color in $skills-color {
    .#{$skill}-small {
        box-shadow:
        0 0 0 3px rgba(255, 255, 255, 1),
        0 0 0 5px $color;
    }
    .#{$skill}-med {
        box-shadow:
        0 0 0 3px rgba(255, 255, 255, 1),
        0 0 0 6px $color;
    }
    .#{$skill}-large {
        box-shadow:
        0 0 0 4px rgba(255, 255, 255, 1),
        0 0 0 8px $color;
    }
}

当所有地图的“键”都是单词而不是数字时，这很好用

这是错误：

Error: Invalid CSS after ".": expected class name, was "6-small"

注意：我尝试在“1”、“2”、“3”等中添加键，但无济于事。

感谢您的帮助！

Answer 1

我不相信以数字开头的 CSS 类名是有效的。也许尝试在列表中所有行的前面附加一个字母，看看是否有帮助。

干杯。