반복되는 SCSS소스! @for 지시어로 줄이는 방법! (나는 웹퍼블리셔로 근무 중)

CSS를 작성하다 보면 반복되는 구간이 보인다. 

아래 같은 코드가 나를 신경 쓰이게 만들었다.

&.esg-test-type1 {
    background-image: url(../../assets/images/esg/esg-test-type1.svg);
}

&.esg-test-type2 {
    background-image: url(../../assets/images/esg/esg-test-type2.svg);
}

&.esg-test-type3 {
    background-image: url(../../assets/images/esg/esg-test-type3.svg);
}

&.esg-test-type4 {
    background-image: url(../../assets/images/esg/esg-test-type4.svg);
}

 

 

전에 SCSS  클래스에서 배웠던 @for문을 사용해서 아주 간단하게 줄일 수 있는 방법을 찾았다.

소스를 조금 더 개선하기 위해서 GPT에게 질문!

 

 

 

GPT가 제안한 해결 방법 :

이 SCSS 코드를 반복문을 사용하여 개선하려면, Sass의 @for 디렉티브를 활용할 수 있습니다. 이를 통해 반복되는 패턴을 간결하게 표현할 수 있습니다. 다음은 이 코드를 개선한 예제입니다.

@for $i from 1 through 4 {
    &.esg-test-type#{$i} {
        background-image: url(../../assets/images/esg/esg-test-type#{$i}.svg);
    }
}

 

위 코드에서 @for 디렉티브를 사용하여 1부터 4까지의 숫자를 반복하면서 각 클래스와 배경 이미지를 동적으로 생성합니다. 이렇게 하면 코드가 훨씬 간결해지고 유지보수도 쉬워집니다. 

필요에 따라 반복 횟수를 쉽게 조정할 수 있습니다.

---

조건은 이미지의 파일명을 일관성있게 지어야 한다는 것!

 

매우 간결해진 SCSS 코드 사용 후기 : 

코드를 최소화하고 짧게 작성하는 것을 지향하고 있기에 (최소 코드, 최대 효과) SCSS의 다양한 디렉티브를 충분히 숙지해야 할 것 같다. mixin, include, extend, each, else 등 여러 가지 요소들이 기다리고 있다!