代码之家 › 专栏 › 技术社区 › JordanBarber

在嵌套的mixin中的每个变量上使用SASS

scss-mixins each sass loops css

0

JordanBarber · 技术社区 · 7 年前

我想使用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 mixin中@each循环中的变量名。我正在尝试这一点,但当它碰到“svg”属性中的@each变量时失败了:

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

1 回复 | 直到 7 年前

1

0

LeNiglo 7 年前

您正在处理命名参数。

应该是这样的:

@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