lang=“scss“动态拼接变量 设置背景图

 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;

scss-字符串连接符

sass 字符串拼接