css - 根据索引查询scss映射到位置div

Question

我有一个我一直在研究的评论系统，它有一个由一些星星组成的白色模板，通过在它后面移动一个绝对定位的 div 来填充这些星星。

scss map 上有一些百分比，我想用它来定位这个 div。

示例类 .review-note-2 只是 php 如何根据评论计数填充 div 的示例。

目标:遍历 map 并分配 scss map 中此 .review-note-class 的左值。

scss:

$position: (
  0:    -100%,
  1:    -86%,
  2:    -64%,
  3:    -38%,
  4:    -17%,
  5:    0% 
);

.product-review-rates {
    width:428px;
    display:inline-block;

    .review-stars {
        background:url('star-stencil.svg') no-repeat;
        width:100%;
        z-index:1;
        display:inline-block;
        height:150px;
        background-size: 428px 60px;
        overflow:hidden;

        & > div {
        position: relative;
    z-index: -1;
    width: 100%;
    background-color: #eb93b7;
    left:-100%;
    height: 60px;
        }
      @for $i from 0 through 5 {
            .review-note-#{$i} { 
            left:0px; // query $position map above
            }
        }
    }
}

html:

<div class="product-review-rates">
   <div class="review-stars">
      <div class="review-note-2"></div> 
   </div>
</div>

(几乎)工作示例: http://codepen.io/anon/pen/MayvYE

Answer 1

回答自己的问题(畏缩!):

 $position: (
      0:    -100%,
      1:    -86%,
      2:    -64%,
      3:    -38%,
      4:    -17%,
      5:    0% 
    );
    @each $starNo, $value in $position{
            .review-note-#{$starNo} { 
               left:$value;
            }
    }

链接: http://codepen.io/anon/pen/WQwZoK