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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269243.html

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

Using multiple sass maps to build a single selector

相关推荐

发表回复