css - 在嵌套混合中使用 SASS @each 变量

Question

我想使用 Sass 内置的@each 方法来缩短这段代码:

.svg-circle-full {
    @include mixinSVG((
        'svg': $svgvar-icn-circle-full,
        'isWide': false
    )...);
}

.svg-circle-empty {
    @include mixinSVG((
        'svg': $svgvar-icn-circle-empty,
        'isWide': false
    )...);
}

.svg-circle-half {
    @include mixinSVG((
        'svg': $svgvar-icn-circle-half,
        'isWide': false
    )...);
}

基本上，我需要能够在 mixinSVG 混入中使用我的 @each 循环中的变量名。我正在尝试这个，但是当它遇到 'svg' 属性中的 @each 变量时它失败了:

@each $state in full, empty, half {
    .svg-circle-#{$state} {
        @include mixinSVG((
        'svg': $svgvar-icn-circle-#{$state},
        'isWide': false
        )...);
    }
}

Answer 1

你弄乱了命名参数。

它应该是这样的:

@each $state in triangle, square, circle {
    .svg-circle-#{$state} {
        @include mixinSVG(
        $svg: svgvar-icn-circle-#{$state},
        $isWide: false
        );
    }
}

来源:http://blog.ricardofilipe.com/post/object-arguments-in-sass