Sass中的@for指令用于具有类似URL的背景图像

Question

问题

我希望创建使用Sass＆＃39; @for directive创建一个循环，以便我不会写入背景网址25次。在我的情况下，有三个图像需要使用square-court.jpg，而所有其他图像都遵循square-#.jpg模式

循环片段（当前不起作用）

@for $i from 1 through 25 {
  @if $i == 4, 16, 12 {
    .square4,
    .square6,
    .square12 {
      background: url("../../src/img/sm-square-court.jpg");
    }
  } else {
    .square#{$i} {
      background: url("../../src/img/sm-square-#{$i}.jpg");
    }
  }
} 

grid.scss

.square1 { background: url("../../src/img/sm-square-1.jpg"); }
.square2 { background: url("../../src/img/sm-square-2.jpg"); }
.square3 { background: url("../../src/img/sm-square-3.jpg"); }
.square5 { background: url("../../src/img/sm-square-5.jpg"); }
.square7 { background: url("../../src/img/sm-square-7.jpg"); }
.square8 { background: url("../../src/img/sm-square-8.jpg"); }
.square9 { background: url("../../src/img/sm-square-9.jpg"); }
.square10 { background: url("../../src/img/sm-square-10.jpg"); }
.square11 { background: url("../../src/img/sm-square-11.jpg"); }
.square13 { background: url("../../src/img/sm-square-13.jpg"); }
.square14 { background: url("../../src/img/sm-square-14.jpg"); }
.square15 { background: url("../../src/img/sm-square-15.jpg"); }
.square16 { background: url("../../src/img/sm-square-16.jpg"); }
.square17 { background: url("../../src/img/sm-square-17.jpg"); }
.square18 { background: url("../../src/img/sm-square-18.jpg"); }
.square19 { background: url("../../src/img/sm-square-19.jpg"); }
.square20 { background: url("../../src/img/sm-square-20.jpg"); }
.square21 { background: url("../../src/img/sm-square-21.jpg"); }
.square22 { background: url("../../src/img/sm-square-22.jpg"); }
.square23 { background: url("../../src/img/sm-square-23.jpg"); }
.square24 { background: url("../../src/img/sm-square-24.jpg"); }
.square25 { background: url("../../src/img/sm-square-25.jpg"); }

.square4,
.square6,
.square12, { 
  background: url("../../src/img/sm-square-court.jpg"); 
}

Answer 1

嗨尝试这样的事情

$class-slug: square !default;

    @for $i from 1 through 20 {
      .#{$class-slug}#{$i} {
        @if $i == 4 or $i == 6 or $i == 12 {
          background: url(../../src/img/sm-square-court.jpg);
        }
        @else{
          background: url(../../src/img/sm-square#{$i}.jpg);
        }
      }
    }

它在这里工作，您可以查看 LINK 。