SCSS_#{ } 문자보간

예시1. 기본문법 응용

@mixin bx ($position, $wid, $color){
    border-#{$position}: $wid solid $color;
} 
>> border 방향 부분에 #{$변수} 기입, @include 할 때 방향 써주면 됨
>> $wid=가로값, $color=색상
div { @include bx (right, 2px, red) }

>> css에 div{border-right: 2px solid red;}로 적용됨

 

 

예시2. for문 응용1

@for $i from 1 to 6 { >> i의 1부터 5까지 반복하겠다. (to는 미만을 뜻함)
    nav ul .menu#{$i} > a {color: red;}
} >> 메뉴 li가 차례대로 선택되며 글자 색상 변경됨

 

 

예시2. for문 응용2

@for $i from 1 to 6 {
    nav ul .menu#{$i} {background-image: url(img#{$i}.jpg)}
}

>> 메뉴 li에 이미지 넣을 때, img1.jpg~img5.jpg까지 들어가게 됨

>> css에 nav ul .menu1{background-image: url(img1.jpg)}~nav ul .menu1{background-image: url(img5.jpg)}로 적용됨

 

 

 

p.s - 유튜브 리베하얀 영상 참고