作者：feileide2011_108 | 来源：互联网 | 2023-01-04 11:58
如何mixin argument从array variable与Sass的循环中获得？示例代码如下:
$colors: red green blue;
$red-foo: 100px;
$red-bar: 110px;
$red-baz: 120px;
$green-foo: 100px;
$green-bar: 110px;
$green-baz: 120px;
$blue-foo: 100px;
$blue-bar: 110px;
$blue-baz: 120px;
@mixin item($color-foo, $color-bar, $color-baz){
width: $color-foo,;
height: $color-bar;
...
}
@each $color in $colors {
.class-#{$color}{
@include item($color#{-foo}, $color#{-bar}, $color#{-baz})
}
}
期望的输出如下:
.class-red{
//variables
}
.class-green{
//variables
}
.class-blue{
//variables
}
也就是在那里的速记方式$color-foo, $color-bar, $color-baz一样@include item($color-shorthand)？也许可以有更好的解决方案.
1> Jaredcheeda..：
你想要Sass Maps
$colors: (
red: (
foo: 100px,
bar: 110px,
baz: 110px
),
green: (
foo: 200px,
bar: 210px,
baz: 220px
),
blue: (
foo: 300px,
bar: 310px,
baz: 320px
)
);
@mixin item ($color-foo, $color-bar, $color-baz) {
width: $color-foo;
height: $color-bar;
padding: $color-baz;
}
@each $name, $value in $colors {
.class-#{$name} {
@include item(
map-get($value, foo),
map-get($value, bar),
map-get($value, baz)
);
}
}
京公网安备 11010802041100号