Css 循环变量中的SASS循环
我正在尝试使用循环进行循环,第一个循环是列表,第二个是sass映射。列表中的项目表示sass映射。问题是,在第二个循环中,如果我在#{$event_type}前面简单地添加$,就会抛出一个错误。我应该以不同的方式来处理这个问题吗 名单如下:Css 循环变量中的SASS循环,css,loops,sass,Css,Loops,Sass,我正在尝试使用循环进行循环,第一个循环是列表,第二个是sass映射。列表中的项目表示sass映射。问题是,在第二个循环中,如果我在#{$event_type}前面简单地添加$,就会抛出一个错误。我应该以不同的方式来处理这个问题吗 名单如下: $event_list: 'summit', 'awards', 'awards-europe', 'other'; 示例地图: $awards: ( content-marketing: #F47521, digiday: #FFDD00,
$event_list: 'summit', 'awards', 'awards-europe', 'other';
示例地图:
$awards: (
content-marketing: #F47521,
digiday: #FFDD00,
publishing: #89C63F,
signal: #33AADB,
video: $pink
);
断环:
@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
}
}
}
最好使用多贴图结构:
$event_list: (
'summit': (
key1: #000,
key2: #fff
),
'awards': (
content-marketing: #F47521,
digiday: #FFDD00,
publishing: #89C63F,
signal: #33AADB,
video: $pink
)
);
循环将大致相同:
// 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
}
}
}