HTML
<div :class="['header', `header${num}`]"></div>
data() {
return {
num: this.$route.query.num % 3 || 1,
}
},
CSS
<style lang="scss" scoped>
$imgName: 1, 2, 3;
%bgr {
background-repeat: no-repeat;
background-size: 100% 278px;
}
@for $i from 1 through 3 {
.header#{nth($imgName, $i)} {
@extend %bgr;
background-image: url('../assets/img/banner#{nth($imgName, $i)}.png');
}
}
</style>
简化
@for $i from 1 through 3 {
.header#{$i} {
background: url('../assets/img/banner#{$i}.png') no-repeat;
}
}
.header {
background-size: 100% 278px;
}
.SCSS格式
$imgName: aa, bb ,cc;
%bgr{
background-repeat: no-repeat;
background-position: center center;
}
@for $i from 1 through 3{
.cate-#{nth($imgName, $i)} .imgw{
@extend %bgr;
background-image: url(../img/#{nth($imgName, $i)}.jpg);
span{
}
}
}
被编译为
.cate-aa .imgw, .cate-bb .imgw, .cate-cc .imgw {
background-repeat: no-repeat;
background-position: center center;
}
.cate-aa .imgw {
background-image: url(../img/aa.jpg);
}
.cate-bb .imgw {
background-image: url(../img/bb.jpg);
}
.cate-cc .imgw {
background-image: url(../img/cc.jpg);
}
.SASS格式
$imgName: aa, bb, cc
%bgr
background-repeat: no-repeat
background-position: center center
@for $i from 1 through 3
.cate-#{nth($imgName, $i)} .imgw
@extend %bgr
background-image: url(../img/#{nth($imgName, $i)}.jpg)
span
被编译为:
.cate-aa .imgw, .cate-bb .imgw, .cate-cc .imgw {
background-repeat: no-repeat;
background-position: center center;
}
.cate-aa .imgw {
background-image: url(../img/aa.jpg);
}
.cate-bb .imgw {
background-image: url(../img/bb.jpg);
}
.cate-cc .imgw {
background-image: url(../img/cc.jpg);
}
background: url('#{$imgPre}#{nth($imgName,$i)}') no-repeat center;