uni-app/vue利用scss的@for和@if制作排行榜（排序不同，颜色不同）

废话不多说，先来看最终效果：

好，实际上需求很简单，就是有一个排行榜，
需要突出前5条，并且所有数字的颜色依次变淡（当然你要标题也跟着变是一样的原理）

来看看template部分：
这里分别左右两个list，然后直接循环出来10条模拟数据。

<view class="topic-list">
	<view class="left-list">
		<view v-for="item in 5" class="topic-item" :key="item">
			<text class="no" :class="'rank-' + item">{{ item }}</text>
			<text class="name u-line-1">#话题名称话题名称话题名称{{ item }}</text>
		</view>
	</view>
	<view class="right-list">
		<view v-for="item in 5" class="topic-item" :key="item">
			<text class="no" :class="'rank-' + (item + 5)">{{ item + 5 }}</text>
			<text class="name u-line-1">#话题名称话题名称话题名称{{ item + 5 }}</text>
		</view>
	</view>
</view>

其中，注意看序号部分的class除了默认的no以外，还有一个通过序号拼接的rank-X
然后来看css部分

@for $i from 1 through 10 {
	/*前5条*/
	@if $i <= 5 {
		.rank-#{$i} {
			color: #fff;
			width: 32rpx;
			height: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $u-sub;
			border-radius: 50%;
			background-color: rgba(red, (11-$i)/10);
		}
	}
	/*后5条*/
	@if $i > 5 {
		.rank-#{$i} {
			color: rgba(red, (16-$i)/10);
		}
	}
}

上边代码可以看出来，前5条循环之后，rank-1~5都有一个圆形的底色，并且经过计算后颜色深度从1开始递减到0.5；
同理，后6条没有底色，但文字颜色也同样是颜色从深到浅。

结束~