根据索引查询scss映射到位置div
Querying scss map to position div based on index
我有一个我一直在研究的评论系统,它有一些星星的白色模板,通过在它后面移动一个绝对定位的 div 来填充这些星星。
scss 地图上有一些百分比,我想用它来定位这个 div。
示例 class .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
回答自己的问题(畏缩!):
$position: (
0: -100%,
1: -86%,
2: -64%,
3: -38%,
4: -17%,
5: 0%
);
@each $starNo, $value in $position{
.review-note-#{$starNo} {
left:$value;
}
}
我有一个我一直在研究的评论系统,它有一些星星的白色模板,通过在它后面移动一个绝对定位的 div 来填充这些星星。
scss 地图上有一些百分比,我想用它来定位这个 div。
示例 class .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
回答自己的问题(畏缩!):
$position: (
0: -100%,
1: -86%,
2: -64%,
3: -38%,
4: -17%,
5: 0%
);
@each $starNo, $value in $position{
.review-note-#{$starNo} {
left:$value;
}
}