Using multiple sass maps to build a single selector
我正在尝试创建一系列类,这些类使用两个创建类和属性的 sass 映射。这是我的地图的简化版本:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $color1: #aaa; $color2: #ccc; $color3: #eee; $colors: (); $colors: map-merge(( "color1": $color1, "color2": $color2, "color3": $color3 ), $colors); $pattern1: url('pattern1.svg'); $pattern2: url('pattern2.svg'); $pattern3: url('pattern3.svg'); $patterns: (); $patterns: map-merge(( "pattern1": $pattern1, "pattern2": $pattern2, "pattern3": $pattern3 ), $patterns); |
基本上我想要输出的是每种颜色和图案的组合作为类选择器(例如
1 2 3 4 | .bgp-[pattern]-[color] { background: [pattern value] repeat, [color value]; } |
我如何在 sass 中实现这一点?我已尝试使用
能够通过结合两个
1 2 3 4 5 6 7 8 | @each $pattern, $patternvalue in $patterns { @each $color, $colorvalue in $colors { .bgp-#{$pattern}-#{$color} { background: $patternvalue repeat, $colorvalue; } } } |
哪些输出:
1 2 3 4 5 6 7 8 9 | .bgp-pattern1-color1 {background: url("pattern1.svg") repeat, #aaa;} .bgp-pattern1-color2 {background: url("pattern1.svg") repeat, #ccc;} .bgp-pattern1-color3 {background: url("pattern1.svg") repeat, #eee;} .bgp-pattern2-color1 {background: url("pattern2.svg") repeat, #aaa;} .bgp-pattern2-color2 {background: url("pattern2.svg") repeat, #ccc;} .bgp-pattern2-color3 {background: url("pattern2.svg") repeat, #eee;} .bgp-pattern3-color1 {background: url("pattern3.svg") repeat, #aaa;} .bgp-pattern3-color2 {background: url("pattern3.svg") repeat, #ccc;} .bgp-pattern3-color3 {background: url("pattern3.svg") repeat, #eee;} |