Question

我正在尝试使用两个数组中的值编写一个sass混合来输出我的按钮类。不确定我想要做什么是可能的。

所以我有两个数组：

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

然后我的mixin是：

@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;
    }
}

然后我为名称执行@each循环，并尝试在其中嵌套另一个循环以获取颜色。显然这不起作用！只是想知道它是否可能。

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

所需的输出类似于：

.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

这是DEMO

如果您需要将您的值分开，请在2个列表中，然后您可以...

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

然而，使用地图会更容易一些。

$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)
}

SASS / SCSS @each多个数组

2 个答案: