[Sass 특징] Interpolation (보간법, #{})

Sass 문법을 작성하다보면 변수를 사용하게 되는 경우가 많다.

변수를 사용하다보면 내가 생각하던 변수 값이 제대로 컴파일 되지 않고

에러가 나거나 이상한 값으로 css가 컴파일 되는 경우가 많이 있을 것이다.

 

그러한 경우엔 보통은 Interpolation 즉, 보간법을 사용하지 않고

변수만을 사용했기 때문에 그런 경우가 많다.

 

1. Interpolation(보간법) 의 특징

- #(샵) 특수문자와 {}(중괄호)를 사용하여 표기한다.  #{..}

- 삽입된 문자나 변수를 문자 그대로 적용시켜 연산이 되지 않게 한다.

- @mixin, @import, 일반적인 Sass 문법 등 변수나 문자를 통해 가변적인 값들을 적용해야하는 경우 사용한다.

 

보간법은 Sass 문법에서 가장 기본이 되는 내용이면서

모른다면 Sass 문법을 지나치게 제한적으로 밖에 사용할 수 없는 중요한 내용이다.

 

주로 사용하는 영역은

변수를 통한 클래스나 css내용 적용,

@each나 @mixin 등 문법을 작성할 때 주로 사용한다.

 

2. Interpolation(보간법) 의 사용

보간법의 사용 영역 중 주로 사용하는 몇가지 예시를 통해

보간법에 대해 알아보려한다.

 

1. 변수를 통한 클래스명 적용

/* 변수 */
$page: main;

/* SCSS 적용 (x) */
.$page_wrap{
  ...
}

$page라는 변수를 선언하고

.main_wrap 클래스를 만들고 싶어 .$page_wrap를 작성하여 문법을 작성해보았을 때

해당 내용은 컴파일 되지 않고 에러가 뜨게된다.

 

그래서 자바스크립트 문법 처럼 따옴표와 + 기호를 사용해서

'.' + $page + 'wrap' 라고 작성을 해도 마찬가지로 제대로 컴파일 되지 않는다.

 

이러한 경우에 보간법을 사용하여 내가 원하는 변수를 원하는 영역에 문자 그대로 넣을 수 있다.

/* 변수 */
$page: main;

/* 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} 보간법을 사용한다.

 

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

보간법안에 들어간 변수들은 그 변수가 숫자일지라도

문자로 인식을 하기 때문에 숫자를 넣어서 사용하게 될 경우

내가 원하는 값이 맞는지 컴파일 된 내용을 확인해볼 필요가있다.

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

.box{
  width: $test1 + $test2 + px;
}

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


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

위의 예시를 보면 확인할 수 있다.

.box1과 .box2 둘 다 $test1, $test2 변수를 사용했지만

css로 컴파일된 값은 천지차이가 난다.

 

보간법을 사용하지 않은 경우 $test1의 12와 $test2의 34가 연산이 되어 46이라는 값이 적용되고

보간법을 사용한 경우 $test1의 12와 $test2의 34가 단순 문자열로 인식되어 12와 34의 합성이 일어나 1234가 된다.

 

 

이처럼 보간법을 사용할 때,

내가 연산이 필요한건지 단순 문자열을 구현해야하는지 확인하고 작성할 필요가 있다.

 

 

 

---

sass-lang.com/documentation/interpolation