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

牛青 • • 问答 • 250 阅读

Using multiple sass maps to build a single selector

我正在尝试创建一系列类，这些类使用两个创建类和属性的 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;}
以上是关于css：使用多个sass映射构建单个选择器的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>