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

假设一个事物的评级分为五个等级，后台传等级的数据过来，比如是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：

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