gpt4 book ai didi

css - 循环变量中的 SASS 循环

转载 作者:太空宇宙 更新时间:2023-11-04 07:52:55 25 4
gpt4 key购买 nike

我试图用一个循环来循环,第一个循环是一个列表,第二个是一个 sass 映射。列表中的元素表示 sass 映射。问题是,在第二个循环中,如果我只是在#{$event_type} 前面添加 $,则会引发错误。我应该以不同的方式处理这个问题吗?

列表:

$event_list: 'summit', 'awards', 'awards-europe', 'other';

示例 map :

 $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
}
}
}

SassMeister Demo

关于css - 循环变量中的 SASS 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47599534/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com