(SCSS)문자보간과 for 반복문

문자보간

선택자나 속성은 일반 변수로는 처리가 불가능하다.
이를 처리하기 위해서 문자보간을 사용하는데, #{}를 사용하면 코드의 어디든지 변수값을 넣을 수 있다.

@mixin box($position, $width, $color) {
    border-#{$position}: $width solid $color;
}

div{
    @include box(left, 2px, blue);
}
p{
    @include box(bottom, 1px, red);
}

이렇게 문자보간을 사용하여 속성에도 변수를 넣어줄 수 있다.

CSS에서는 아래처럼 나타난다.

div {
  border-left: 2px solid blue;
}

p {
  border-bottom: 1px solid red;
}

for 반복문

SCSS에서 쓰는 for문은 Javascript처럼 다양한 기능을 한다기보다는, 특정 경우의 반복된 코드를 한번에 모두 해결 할 수 있는 문법이다.

이렇게 li에 아이콘을 각각 넣어주려면, CSS로는 하나씩 background-image 경로를 지정해야 한다.

.list li.icon1 {
  background-image: url(img/icon1.svg);
}

.list li.icon2 {
  background-image: url(img/icon2.svg);
}

.list li.icon3 {
  background-image: url(img/icon3.svg);
}

.list li.icon4 {
  background-image: url(img/icon4.svg);
}

하지만 아래처럼 for문을 사용하면 간편하게 작성할 수 있다.

@for $i from 1 through 4 {
    .list li.icon#{$i} {
        background-image: url(img/icon#{$i}.svg);
    }
}

form 1 through 4는 1부터 4까지를 의미하고, from 1 to 4는 1부터 4의 직전까지 즉 3까지를 의미한다.