1. @for문의 사용

@for 변수 from (시작 숫자) to (끝 숫자){...}

위와 같은 형태로 작성하고 to 대신 through를 작성할 수 있다.

예시

/* scss */
@for $i from 1 to 3{
	.icon_#{$i}{
    	background-position:0 ($i * -10px);
    }
}

/* css */
.icon_1{background-position:0 -10px;}
.icon_2{background-position:0 -20px;}

@for문을 작성할 때 변수는 보간법으로 처리해야 컴파일 에러가 발생하지 않는다

• 보간법

• #(샵) 특수문자와 {}(중괄호)를 사용하여 표기한다
• 삽입된 문자나 변수를 문자 그대로 적용시켜 연산이 되지 않게 한다.
• @mixin, @import, 일반적인 sass 문법 등 변수나 문자를 통해 가변적인 값들을 적용해야하는 경우에 사용한다.

/* 변수 */
$page: main;

/* SCSS 적용(X) - 에러 케이스 */
.$page_wrap{ ... }

/* SCSS 적용(O) */
.#{$page}_wrap{ ... }

2. @each 문법에서 사용

/* scss */
@each animal in (horse, tiger, lion){
	.#{$animal}{
    	background:url('../images/' + $animal + '.jpg') no-repeat 0 0;
    }
}

/* css */
.horse {
	background: url('../images/horse.jpg') no-repeat 0 0;
}
.tiger{
	background: url('../images/tiger.jpg') no-repeat 0 0;
}
.lion{
	background: url('../images/lion.jpg') no-repeat 0 0;
}

위의 예시와 같이 @each문을 사용해서 원하는 클래스에 원하는 이미지를 넣게 될 경우,
$animal이라는 가변적인 요소에 .(점)을 찍어서 클래스명을 적용해야 하는데
단순히 .$animal{...} 로 적용하게 되면 .과 animal 내용이 연산처리가 되어 컴파일 에러가 뜬다.

이처럼 .과 $animal이 단순히 문자열끼리의 조합을 만들고, 그 문자로 문법을 적용해야할 경우 .#{$animal} 보간법을 사용한다

Interpolation(보간법) 사용 시 주의사항

보간법 안에 들어간 변수들은 그 변수가 숫자일지라도 문자로 인식하기 때문에 숫자를 넣어서 사용하게 될 경우 내가 원하는 값이 맞는지 컴파일 된 내용을 확인해볼 필요가 있다.

/* SCSS */
$test1: 12;
$test2: 34;

.box1{width: $test1 + $test2 + px;}
.box2{width: #{$test1} + #{$test2} + px;

/* CSS */
.box1{width: 46px;}
.box2{width: 1234px;}

.box1과 .box2 둘 다 $test1, $test2 변수를 사용했지만 css로 컴파일된 값은 너무나도 다르다.

Interpolation(보간법)을 사용하지 않은 경우 $test1의 12와 $test2의 34가 연산 되어서 46이라는 값이 적용되고,
Interpolation을 사용한 경우 $test1의 12와 $test2의 34가 단순 문자열로 인식되어서 12와 34의 합성이 일어나 1234가 된다. (문자로 인식)

따라서 보간법을 사용할 때,
1. 연산이 필요한 것인지, 단순 문자열이 필요한 것인지 확인하고
2. 컴파일된 값을 확인해야한다.