[SCSS] 04. Interpolation

이번 포스트에서는 보간법 즉 interpolation에 대해서 살펴보자.

 

Interpolation

 

#{  }

Interpolation(보간법)은 문자열 중간에 특정 기호( #{변수} )로 표시해둔 부분을 문자열로 치환하는 기법을 말한다.  일반적으로는 값 보다는 속성을 동적으로 만들어야 할 때 사용된다.

$name: my;
$색: color;

@warn "JS `과 비슷: #{$name}, #{$색}, #{2+4}";
@warn "JS `과 비슷: "+$name+", "+$색+", "+#{2+4};

#{$name}-div {
    border-#{$색}: blue;
    background-#{$색}: red;
}

my-div {
  border-color: blue;
  background-color: red;
}

 

@warn의 출력 형태를 살펴보면 마치 javascript의 백틱(`)에서 문자열 내에 변수를 출력하는 것과 유사하다. 이 과정을 문자열 결합 형태로 처리하면 상당히 지저분하다.

Warning: 자바스크립트의 백틱과 비슷하다. my, color, 6
    01_interpolation.scss 4:1  root stylesheet

Warning: 자바스크립트의 백틱과 비슷하다. my, color, 6
    01_interpolation.scss 5:1  root stylesheet

 

" " 제거

font familly를 설정하는 등 간혹 css를 작성하다보면 + 자체를 값에 포함시켜야하는 경우가 있다.

$family1: Noto+Sans+KR;

그런데 똑똑한 SCSS는 +를 보는 순간 '아. 연결해야겠구나' 라고 생각하고 $family1의 값을 NotoSansKR로 처리해버린다. 이런 경우 +를 유지하기 위해서는 전체를 문자열로 감싸주면 된다.

$family2: "Noto+Sans+KR";

그런데 이 변수를 그냥 사용하게 되면 "" 까지 값으로 처리하기 때문에 상당히 곤혹스러워진다. 이때 #을 이용하면 "을 자동으로 제거해준다.

$family1: Noto+Sans+KR;
$family2: "Noto+Sans+KR";

/* NotoSansKR, "Noto+Sans+KR", Noto+Sans+KR, Noto+Sans+KR */
@warn $family1, $family2, #{$family2}, unquote($family2)

참고로 보간법을 사용하기 보다 unquote 함수를 이용해서 "를 제거하는 것이 더 명확하고 깔끔해서 더 권장한다고 한다.