情景：
给一组li元素或者菜单元素添加不同字体颜色的样式，不要傻乎乎挨个写下来。可以使用@for 指令和scss声明配合使用。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
<div class="system-btn user-btn">
<p class="text">用户管理</p>
</div>
<div class="system-btn log-btn">
<p class="text">日志管理</p>
</div>
<div class="system-btn backend-btn">
<p class="text">后台管理</p>
</div>
<div class="system-btn scene-btn">
<p class="text">场景管理</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<style lang="scss" scoped>
// 4个系统的字体颜色 css
$list-bg: #09A6FF, #FFC633, #1EF1FF, #15EA91;
@for $i from 1 to 5 {
.system-btn:nth-child(#{$i}){
.text {
color: nth($list-bg,$i);
text-shadow: 4px 4px 4px nth($list-bg,$i);
}
}
}
</style>
效果：
知识点：
@for的两种循环方式：
- @for $var from [start] through [end]
- @for $var from [start] to [end] . 此种方式的遍历索引区间是[start,end-1]
1
2
3
4
5
6
7
8
9
10
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
编译后:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
end!