我有一个很长的 sass 映射,作为片段是 ( full code in Codepen ):
$pbcolors: (
pbcyan : (
50: #E5F5FC,
100: #CCEBF9,
200: #99D7F2,
300: #66C3EC,
400: #33AFE5,
500: #009DBF,
600: #008CAB,
700: #007C98,
800: #006D85,
900: #005D72
),
pbmediumblue: (
50: #E5F1F8,
100: #CCE3F1,
200: #99C7E3,
300: #66AAD4,
400: #338EC6,
500: #0072B8,
600: #0065A5,
700: #005A93,
800: #004F80,
900: #00436E
),
pbpurple: (
50: #F5ECF5,
100: #ECD9EB,
200: #D9B2D7,
300: #C68CC3,
400: #B365AF,
500: #A03F9B,
600: #90388B,
700: #80327C,
800: #702C6C,
900: #60255D
);
我正在尝试编写一个循环来创建一系列以颜色和阴影命名的类,以 bg 颜色为十六进制,就像这样
.bg-pbmediumblue-100 { background: #CCE3F1; }
但是,我的语法必须被破坏,因为我没有跳到第二个级别:
@each $item, $color in $pbcolors {
@each $shade, $value in $item {
.bg-#{$shade}-#{$shade} {
background-color: map-get(map-get($pbcolors, $item), 50);
}
}
}
从这里我只得到每种颜色的 50 个,以及错误的类名:
.bg-pbcyan-pbcyan {
background-color: #E5F5FC;
}
.bg-pbmediumblue-pbmediumblue {
background-color: #E5F1F8;
}
我搞砸了什么?
最佳答案
您引用了错误的变量。 $item
变量(第一个)引用映射键 名称,而不是值(第二个)。您需要迭代内部循环中的值。
@each $item, $color in $pbcolors {
@each $shade, $value in $color {
.bg-#{$item}-#{$shade} {
background-color: $value;
}
}
}
关于css - Sass 映射循环的可能性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29800902/