如何用SASS双数组@each循环生成匹配的下划线按钮类？

嘿，这个需求完全可以实现！你之前用嵌套双循环的问题在于，它会生成所有按钮名称和颜色的组合（比如btn-underline-black会同时匹配black、blue、red等所有颜色），而我们需要的是两个数组按索引一一对应的匹配，对吧？

正确的实现思路 #

因为$buttonNames和$buttonColors是按顺序一一对应的，我们可以用Sass的zip()函数把两个数组打包成一组组的元组，然后遍历这个合并后的数组，就能让每个按钮名称对应到它匹配的颜色了。

完整代码示例 #

// 定义对应数组
$buttonNames: ('black', 'primary', 'red', 'green', 'orange');
$buttonColors: (black, blue, red, green, orange);

// 定义混合宏，给$size设置默认值3px，方便复用
@mixin underlineButton($class, $name, $size: 3px, $color: black) {
  .#{$class}-underline-#{$name} {
    background-color: transparent;
    border-bottom: $size solid $color;
    border-radius: 0;
    font-size: .75rem;
  }
}

// 合并数组并遍历调用混合宏
@each $btn in zip($buttonNames, $buttonColors) {
  // 从元组中取出对应名称和颜色
  $name: nth($btn, 1);
  $color: nth($btn, 2);
  
  // 调用混合宏，生成对应样式类
  @include underlineButton('btn', $name, $color: $color);
}

编译后的CSS输出 #

你会得到预期的一一对应的样式类：

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

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

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

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

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

兼容旧版Sass的写法 #

如果你的Sass版本不支持zip()函数，也可以用@for循环通过索引来匹配：

@for $i from 1 through length($buttonNames) {
  $name: nth($buttonNames, $i);
  $color: nth($buttonColors, $i);
  @include underlineButton('btn', $name, $color: $color);
}

这个写法的效果和用zip()完全一致，同样能实现按索引一一对应的匹配。

内容的提问来源于stack exchange，提问作者Sandra Willford