将列表中的值用作选择器SCSS

Question

我正在将列表传递给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)}

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

Answer 1

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

所以从此更改

#{nth($medalData,0)}

到

#{nth($medalData,1)}

您可以调试代码笔中的更改

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