Use SASS @each variable inside nested mixin

Question

I want to use Sass's built-in @each method to shorten this code:

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

Basically I need to be able to use the variable name from my @each loop inside of the mixinSVG mixin. I am trying this but it is failing when it hits the @each variable inside the 'svg' property:

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

Possible duplicate of [Creating or referencing variables dynamically in Sass](https://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass) — Ethan, Feb 19 '19 at 23:53

score 0 · Answer 1 · answered Feb 19 '19 at 23:44

0

You are messing with the named parameters.

It should look like this :

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

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

answered Feb 19 '19 at 23:44

LeNiglo

71
8

This gives me the same error, complaining about the variable name – JordanBarber Feb 19 '19 at 23:49
You might not be using the correct version of SCSS then. This is not valid is SASS. @JordanBarber – LeNiglo Feb 21 '19 at 01:10

Use SASS @each variable inside nested mixin

1 Answers1