Question

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

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

示例类.review-note-2只是php根据审核次数填充div的示例。

目标：循环浏览地图并指定scss地图中此.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

回答自己的问题（cringes！）：

 $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

根据索引查询scss map到div的位置

1 个答案: