Sass에서 반복문(@for)과 변수로 클래스/스타일 중복 제거하기

 

🔖 기본 sass 방법

=> 중복으로 써야해서 코드가 길어짐

button{
	.&btn_time0{background-image:url(../../assets/img/btn_time0.png);}
    .&btn_time1{background-image:url(../../assets/img/btn_time1.png);}
    .&btn_time2{background-image:url(../../assets/img/btn_time2.png);}
    .&btn_time3{background-image:url(../../assets/img/btn_time3.png);}
}

 

 

🔖 중복을 줄이기 위해 반복문(@for) 사용

@for $i from 0 through 3{
    &.btn_time#{$i}{
        background-image:url('../../assets/img/btns/btn_time#{$i}.png');
    }
}

 

=> 이렇게 하려면 이미지 명이 명확하지 않아서(이미지 명으로만 무슨 아이콘인지 추측 불가) 밑에 방법으로!

 

🔖 반복문(@for)과 변수 사용

$btn_time_img_name:('../../assets/img/btns/btn_all_day.png', '../../assets/img/btns/btn_am_half.png', '../../assets/img/btns/btn_pm_half.png', '../../assets/img/btns/btn_direct.png');

근데 또 이름만 변수로 하기엔 같은 경로가 반복됨

이것도 줄이고 싶음!!

 

button{
    $btn_time_img_path:'../../assets/img/btns/';
    $btn_time_img_name:('btn_all_day.png', 'btn_am_half.png', 'btn_pm_half', 'btn_direct.png');

    @for $i from 0 through 3{
        &.btn_time#{$i}{
            background-image:url('#{$btn_time_img_path}#{nth($btn_time_img_name, $i)}');
        }
    }
}

 

 

에러뜸!! 왤까!!!❓🤔

 

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $n: List index may not be 0.

 

=> nth() 를 사용하는데 지금 i는 0부터 시작해서 nth(0)이 없으니 nth(1)부터 시작해야함

 

 

🔖 최종 코드

button{
    $btn_time_img_path:'../../assets/img/btns/';
    $btn_time_img_name:('btn_all_day.png', 'btn_am_half.png', 'btn_pm_half', 'btn_direct.png');

    @for $i from 0 through 3{
        &.btn_time#{$i}{
            background-image:url('#{$btn_time_img_path}#{nth($btn_time_img_name, $i + 1)}');
        }
    }
}

background-image:url('#{$btn_time_img_path}#{nth($btn_time_img_name, $i + 1)}');

 

완성..!!!!