html5星星评分组件，sass双循环写法

最新推荐文章于 2024-06-28 16:03:48 发布

开心大表哥

最新推荐文章于 2024-06-28 16:03:48 发布

阅读量1.6w

点赞数 3

分类专栏： css3 sass 文章标签： sass

本文链接：https://blog.csdn.net/a419419/article/details/78337760

版权

css3 同时被 2 个专栏收录

25 篇文章 3 订阅

订阅专栏

sass

6 篇文章 0 订阅

订阅专栏

h5星星评分组件，sass双循环写法
1.效果图：
这里写图片描述
2.html

<span class="star-span-4">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</span>

3.功能需求：star-span-4,中的4可以变成0-5的任意一个数字，红色的星星的对应数量要等于star-span-n中的n。
4.sass双层for循环

.star-span-0{
   margin-top: rem(10px);
   display: inline-block;
   i{
       display: inline-block;
       width:rem(27px);
       height: rem(25px);
       background-repeat:no-repeat;
       @include prefixer(background-size,100% 100%);
       background-image:url(../images/icon_star.png);
   }
}
@for $i from 1 through 5{
    .star-span-#{$i} {
         margin-top: rem(10px);
         display: inline-block;
         i{
             display: inline-block;
             width:rem(27px);
             height: rem(25px);
             background-repeat:no-repeat;
             @include prefixer(background-size,100% 100%);
             background-image:url(../images/icon_star.png);
         }
         @for $j from 1 through $i {
            i:nth-child(#{$j}){
                background-image:url(../images/icon_star_active.png);
            } 
         }
    }
}