簡(jiǎn)單版

@for $i from 1 through 6 {&:nth-of-type(#{$i}) img {transition-delay: calc(0.1 *#{$i}s);//逐次延時(shí)效果}
}

進(jìn)階版

@for $i from 1 through length($數(shù)組) {$color: nth($數(shù)組, $i);&:nth-of-type(#{$i}) {color: $color;//通常用于序列顏色顯示效果&:hover {color: white;}}
}

混合版

$bg-color: "blue", "lightBlue", "green", "orange", "yellow", "purple", "pink", "red", "lightRed";
$bgColors: $blue, $lightBlue, $green, $orange, $yellow, $purple, $pink, $red, $lightRed;
@for $i from 1 through length($bg-color) {
//通過顏色屬性定位不同節(jié)點(diǎn)，制定進(jìn)行顏色樣式設(shè)置&[bg-color="#{nth($bg-color, $i)}"] {color: white;background-color: nth($bgColors, $i);background-image: url("static/img/v-html/bg/#{nth($bg-color, $i)}.jpg");}
}

復(fù)雜序列逐幀動(dòng)畫

<style lang='scss' scoped>
.sg-body {animation: sg-animate 2s infinite alternate; //在兩秒內(nèi)完成序列png動(dòng)畫圖片來回播放，并循環(huán)無限次$bgPreUrl: "http://www.shuzhiqiang.com/img/bg_"; //序列圖路徑前綴@keyframes sg-animate {$len: 75; //逐幀動(dòng)畫畫面自由75張圖@for $i from 0 through $len {#{ $i * 1% } {background-image: url(#{$bgPreUrl}#{$i}.png);}}// 序列圖播放完畢那一刻到100%時(shí)間（第2s結(jié)束那一刻）之間都停留在最后一張序列圖靜止不動(dòng)#{ $len * 1% },100% {background-image: url(#{$bgPreUrl}#{$len}.png);}}
}
</style>

編譯后的CSS代碼如圖

……

?

?

總結(jié)

以上是生活随笔為你收集整理的【高端】几个关于SCSS中for循环的高级玩法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。