假設一個事物的評級分為五個等級，后臺傳等級的數據過來，比如是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： 以上只是實現方式之一，期待各位分享更好的實現方式。

總結

以上是生活随笔為你收集整理的前端用Sass实现星级评定效果，简单快捷实现星级切换。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。