SCSS循环遍历数组

标签：through   scss   遍历数组   nav   遍历   cti   font   alpha   i+1   

结构：

<div class="bottomNav">
      <div class="item" v-for="(item,i) in bottomNav" :key="i" :class="[‘item_‘+(i+1),item.isActive?‘active‘:‘‘]" @click="navClick(item)">
        <i class="iconfont" :class="item.icont"></i>{{item.name}}
      </div>
</div>

SCSS：

$icon-color: #00fdfb, #ffd200, #fb5911, #2cf698, #5da6fb, #d75efb, #9fff10;

@for $i from 1 through length($icon-color) {
	$item: nth($icon-color, $i);

	&.item_#{$i} {
		background: rgba($color: $item, $alpha: 0.15);
		border: 1px solid $item;
		color: $item;
	}

	&.active {
		border-width: 2px;
		font-weight: bold;
	}
}

SCSS循环遍历数组

标签：through   scss   遍历数组   nav   遍历   cti   font   alpha   i+1   

原文地址：https://www.cnblogs.com/xym0710/p/14511530.html