尝试使用@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类名称是有效的。也许尝试在列表中的所有行的前面添加一个字母，看看是否有帮助。

干杯。