使用多个sass映射来构建单个选择器

Posted 2021-05-04

我正在尝试创建一系列使用两个sass映射的类来创建类和属性。这是我的地图的简化版本：

$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等）：

.bgp-[pattern]-[color] {
    background: [pattern value] repeat,
                [color value];
}

我如何在sass中实现这一目标？我尝试使用@each函数，但无法使其工作。

答案

能够通过结合两个@each功能来实现这一目标：

@each $pattern, $patternvalue in $patterns {
  @each $color, $colorvalue in $colors {
    .bgp-#{$pattern}-#{$color} {
      background: $patternvalue repeat,
                  $colorvalue;
    }
  }
}

哪个输出：

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