如何显示此Scss/Sass值

Question

我想要一些关于以下Scss代码的帮助。我正在尝试构建一个从50到900的调色板，并希望显示颜色值。

$colors: (
"gray": (
"gray-50": (
"color": #FFF3E0
)
)
) !default;

@each $colorname, $color in $colors {
.#{$colorname} {
color: map-get(map-get($colors, gray));
}
}

Answer 1

这可能符合您的需求。

$colors: (
"gray": (
"50": #FFF3E0,
),
) !default;
@each $color-name, $shades in $colors {
@each $shade, $color in $shades {
.#{$color-name}-#{$shade} {
color: #{$color};  
}
}
}

输出：

.gray-50 {
color: #FFF3E0;
}