[SCSS] for문 예시

scss

// for (let i = 0; i < 5; i+=1) {
//   console.log(`loop-${i}`)
// }
$url: "https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images";
@for $i from 1 through 5 {
    .hero:nth-child(#{$i}) .image {
        background-image: url("#{$url}/hero#{$i}.png");
    }
}

컴파일된 css

.hero:nth-child(1) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png");
}

.hero:nth-child(2) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero2.png");
}

.hero:nth-child(3) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero3.png");
}

.hero:nth-child(4) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero4.png");
}

.hero:nth-child(5) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero5.png");
}