捕获 class 附加到的 li

Question

我不确定这是否可行，但是有没有办法让 sass 识别特定 class 附加到哪个 li？

如果我有：

 <ul>
  <li></li>
  <li></li>
  <li class="Selected"></li>
  <li></li>
  <li></li>
 </ul>

我正在尝试让一个 mixin 根据“选定”class 所在的位置来切换 CSS 属性。所以像：

ul li { background: url(@include(mixin));  }

$Names:("../Images/One.png","../Images/Two.png","../Images/Three.png","../Images/Four.png","../Images/Five.png",)

@include mixin($Names){
    @each $liindex in $Names{
    $i: index($Names, $liindex );

    if(/* see if this li has class Selected */){
      /* change property here?
    }
 }
}

Answer 1

nth-of-type 应该可以做到这一点。像这样：

@mixin bg-mixin($Names){
    @each $bg-url in $Names{
        $i: index($Names, $bg-url );
        &:nth-of-type(#{$i}).Selected { background: url($bg-url); }
    }
}

并像这样使用：

ul li {
    @include bg-mixin($Names);
}

导致

ul li:nth-of-type(1).Selected {
  background: url("../Images/One.png");
}
ul li:nth-of-type(2).Selected {
  background: url("../Images/Two.png");
}
ul li:nth-of-type(3).Selected {
  background: url("../Images/Three.png");
}
ul li:nth-of-type(4).Selected {
  background: url("../Images/Four.png");
}
ul li:nth-of-type(5).Selected {
  background: url("../Images/Five.png");
}

捕获 class 附加到的 li

Capture which li a class is attached to

sass

mixins