关于css:使用多个sass映射构建单个选择器

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);

基本上我想要输出的是每种颜色和图案的组合作为类选择器(例如.bgp-pattern1-color1.bgp-pattern1-color2.bgp-pattern2-color1等):

1
2
3
4
.bgp-[pattern]-[color] {
    background: [pattern value] repeat,
                [color value];
}

我如何在 sass 中实现这一点?我已尝试使用 @each 函数,但无法使其正常工作。


能够通过结合两个 @each 函数来实现这一点:

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