SCSS generate classes from two arrays

Question

I am trying to generate classes based off of the contents of two different arrays. Each array can be of different size.
The class name I want would be like this:
.badgeFlat--circle--grey
The arrays can be of different sizes:
$badgeShapes: (
    "circle",
    "hexagon",
    "square",
    "star",
    "ridged"
);
$badgeColors: (
    "gray",
    "orange",
    "green",
    "blue",
    "purple",
    "red",
    "bronze",
    "silver",
    "gold"
);

I can output badgeShape, but I can't figure out how to output badgeColors. I've tried a few different solutions, but either the syntax breaks, or it seems overly complicated.
Here is my loop. I've left out badgeColors, because this is as far as I could get it without breaking:
@each $badgeShape in $badgeShapes {
    &--#{$badgeShape}-- {
        background-image: url('/images/badgeFlat-#{$badgeShape}-.svg');
        background-repeat: no-repeat;
    }
}

It outputs:
.badgeFlat--circle-- {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}

What is the next step I need to take with. my code to implement the classes I want based on these arrays?
Here is a gist:
https://www.sassmeister.com/gist/bfcc1ea839902b9159fd051fb708b5b5

Amaury Hanser · Answer

You are just one step away.
All you need is to nest your @each loop.
// ----
// Sass (v3.4.25)
// Compass (v1.0.3)
// ----

// desired class output: .badgeFlat--circle--grey

.badgeFlat {
  
  $badgeShapes: (
        "circle",
        "hexagon",
        "square",
        "star",
        "ridged"
    );
    $badgeColors: (
        "gray",
        "orange",
        "green",
        "blue",
        "purple",
        "red",
        "bronze",
        "silver",
        "gold"
    );

@each $badgeShape in $badgeShapes {
      @each $badgeColor in $badgeColors {
        &--#{$badgeShape}--#{$badgeColor} {
            background-image: url('/images/badgeFlat-#{$badgeShape}-.svg');
            background-repeat: no-repeat;
        }
      }
    }
}

This will output:
.badgeFlat--circle--gray {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--circle--orange {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--circle--green {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--circle--blue {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--circle--purple {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--circle--red {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--circle--bronze {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--circle--silver {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--circle--gold {
  background-image: url("/images/badgeFlat-circle-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--hexagon--gray {
  background-image: url("/images/badgeFlat-hexagon-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--hexagon--orange {
  background-image: url("/images/badgeFlat-hexagon-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--hexagon--green {
  background-image: url("/images/badgeFlat-hexagon-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--hexagon--blue {
  background-image: url("/images/badgeFlat-hexagon-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--hexagon--purple {
  background-image: url("/images/badgeFlat-hexagon-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--hexagon--red {
  background-image: url("/images/badgeFlat-hexagon-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--hexagon--bronze {
  background-image: url("/images/badgeFlat-hexagon-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--hexagon--silver {
  background-image: url("/images/badgeFlat-hexagon-.svg");
  background-repeat: no-repeat;
}
.badgeFlat--hexagon--gold {
  background-image: url("/images/badgeFlat-hexagon-.svg");
  background-repeat: no-repeat;
}
...

SCSS generate classes from two arrays

One Answer

Add your own answers!

Ask a Question