循环中的 Sass 动态变量答案

【问题标题】：Sass Dynamic Variable in Loop循环中的 Sass 动态变量
【发布时间】：2017-12-21 04:15:16
【问题描述】：

如何在 Sass 的循环中从array variable 获取mixin argument？示例代码如下：

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

还有像@include item($color-shorthand) 这样的$color-foo, $color-bar, $color-baz 的简写方式吗？也许有更好的解决方案。

【问题讨论】：

标签： css sass

【解决方案1】：

你想要 Sass 地图

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

【讨论】：