SASS / SCSS @每个多个数组

Question

I am trying to write a sass mixing using the values from two arrays to output my button classes. Not sure if what I am trying to do is possible at all.

So I have two arrays:

$buttonNames: ('black', 'primary', 'red', 'green', 'orange');
$buttonColors:(black, blue, red, green, orange);

and then my mixin is:

@mixin underlineButton($class, $name, $size, $color: black) {
    .#{$class}-underline-#{$name} {
        background-color: transparent;
        border-bottom: $size + px solid $color;
        border-radius: 0;
        font-size: .75rem;
    }
}

and then I do an @each loop for the names, and attempted to nest another loop inside this to get the colors. Obviously this isn't working! Just wondering if it is even possible.

@each $name in $buttonNames {
    @each $color in $buttonColors {
        @include underlineButton('btn', $name, 3, $color)
    }
}

The desired output would be something like:

.btn-underline-black {
    background-color: transparent;
    border-bottom: 3px solid black;
    border-radius: 0;
    font-size: .75rem;
}

// .btn-underline-* for the rest of the matching keys and colors

Answer 1

Here's a DEMO

If you need to keep your values separate, in 2 lists, then you can...

// loop over $buttonNames
@each $buttonName in $buttonNames {
  // Find the current index of $buttonNames...
  $index: index($buttonNames, $buttonName);
                                  // ... to pull the right from $buttonColors
  @include underlineButton('btn', $buttonName, 3, nth($buttonColors, $index));
}

However, using a map is a little easier.

$buttons: (
  'black': black,
  'primary': blue,
  'red': red,
  'green': green
);

@each $buttonName, $color in $buttons  {
    @include underlineButton('btn', $buttonName, 3, $color)
}

Answer 2

$buttons:   ('black', $black),
            ('primary', $primary),
            ('red', $red),
            ('green', $green);

@each $buttonName, $color in $buttons  {
    @include underlineButton('btn', $buttonName, 3, $color)
}