[英]SASS loop within a loop variable
I'm trying to loop with a loop, the first loop is a list and the second is a sass map. 我正在尝试循环,第一个循环是一个列表,第二个循环是一个sass映射。 The items in the list represent sass maps. 列表中的项目代表无礼地图。 The issue is, in the second loop, an error is thrown if I simply add $ in front of #{$event_type}. 问题是,在第二个循环中,如果我只是在#{$ event_type}前面添加$,则会引发错误。 Should I be approaching this differently? 我应该采取不同的方法吗?
The list: 名单:
$event_list: 'summit', 'awards', 'awards-europe', 'other';
Example map: 示例图:
$awards: (
content-marketing: #F47521,
digiday: #FFDD00,
publishing: #89C63F,
signal: #33AADB,
video: $pink
);
Broken Loop: 断环:
@each $event_type in $event_list {
@each $event, $color in #{$event_type} {
&.#{$event_type}-#{$event} {
section h2, h3 {
color: #{$color};
border-color: #{$color};
}
// More CSS
}
}
}
It may be better to use a multi-map structure: 最好使用多地图结构:
$event_list: (
'summit': (
key1: #000,
key2: #fff
),
'awards': (
content-marketing: #F47521,
digiday: #FFDD00,
publishing: #89C63F,
signal: #33AADB,
video: $pink
)
);
The loop will be about the same: 循环将大致相同:
// Note the added $map variable.
@each $event_type, $map in $event_list {
@each $event, $color in $map {
&.#{$event_type}-#{$event} {
section h2, h3 {
color: #{$color};
border-color: #{$color};
}
// More CSS
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.