代码之家 › 专栏 › 技术社区 › Ashique Ansari

当使用for循环或each循环时,正在从SCSS中的变量中删除编译后的字符串

scss-mixins sass css

Ashique Ansari · 技术社区 · 7 年前

我正在使用SCSS中的for循环在另一个类中设置背景图像。但它在编译后没有给出预期的输出。我是新来的。请帮帮我。这是我试过的。

 $class: avatar;
 $imgSrc: assets/avatars/av;
 $imgType: PNG;
 @for $i from 1 through 10 {
 .#{$class}#{$i} {
   background: url(#{$imgSrc}#{$i}.#{$imgType})  center / contain 
     no-repeat;
  }
 }

 $class: avatar;
 $imgSrc: assets/avatars/av;
 $imgType: PNG;
 @for $i from 1 through 10 {
 .#{$class}#{$i} {
   background: url('assets/avatars/av#{$i}.PNG')  center / contain 
     no-repeat;
  }
 }

在这两种情况下。我得到的输出是这样的:

.avatar1 {
  background: url('av1.PNG') center / contain no-repeat;
 }
.avatar2 {
  background: url('av2.PNG') center / contain no-repeat;
}
.
.

我期待这样的产出。

.avatar1 {
  background: url('assets/avatars/av1.PNG') center / contain no- 
   repeat;
 }
 .avatar2 {
  background: url('assets/avatars/av2.PNG') center / contain no- 
   repeat;
 }
 .
 .