css - 使用列表中的值作为选择器 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)}

必须有一种方法可以做到这一点，因为您可以自己传递多个值。有没有办法将列表中的值用作选择器？

标签： csssasscss-selectors

Answer 1

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

所以改变这个

#{nth($medalData,0)}

至

#{nth($medalData,1)}

您可以在 codepen 中调试更改

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