css - 使用列表中的值作为选择器SCSS

我正在将列表传递给mixin以减少必须传递给mixin的参数数量。 mixin代码可以在下面看到。

@mixin colorMedal($medalData) {
  background-image: linear-gradient(
    45deg,
    nth($medalData,2) 0%,
    nth($medalData,2) 50%,
    nth($medalData,1) 50.1%,
    nth($medalData,1) 100%
  );
  #{nth($medalData,0)} ~ .medal__ribbon--left {
    background: nth($medalData,3);
  }
  #{nth($medalData,0)} ~ .medal__ribbon--right {
    background: nth($medalData,4);
  }
}

我通过的列表看起来像这样

$platinum: ".medal__platinum", $medal-platinum, $medal-platinum-dark,
  $medal-platinum-ribbon, $medal-platinum-ribbon-dark;

mixin的调用是：

@include colorMedal($platinum);

似乎引起编译错误的代码是

#{nth($medalData,0)}

必须有一种方法可以执行此操作，因为您可以自己传递多个值。有没有办法使用列表中的值作为选择器？

最佳答案

Sass列表从索引1开始而不是0

所以从

#{nth($medalData,0)}

至

#{nth($medalData,1)}

您可以调试Codepen中的更改

https://codepen.io/srajagop/pen/wvBrzjO?editors=0102