前端用Sass实现星级评定效果，简单快捷实现星级切换。

本文链接：https://blog.csdn.net/Fabulous1111/article/details/78349530

本文介绍了一种使用Sass实现动态星级评定效果的方法。通过简单的HTML结构与Sass代码结合，可以轻松根据后台传递的不同等级数值展示相应数量的激活星星图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假设一个事物的评级分为五个等级，后台传等级的数据过来，比如是3，那么前端应该实现3颗星星的评定效果，相信各位都遇到过或者有想过星级评定效果如何实现。

下面给大家带来Sass的一种实现方式。star-span-3中的3可根据后台传过来的数据更改，星星active个数将显示为对应的个数。

举例：以下class="star-span-3"的运行效果为：

一：HTML结构：

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

二：Sass代码

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

使用到的image：



以上只是实现方式之一，期待各位分享更好的实现方式。