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 字符串拼接

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/11118.html