SCSS 활용 팁 8. 보간 기능을 사용하여 동적으로 경로 관리하기

SCSS의 변수 보간 기능을 사용하면 반복적인 경로를 동적으로 관리하여 유지보수성이 향상됩니다. 폴더의 위치가 변경되어도 변수의 값만 수정하면 전체 스타일 파일을 업데이트 할 수 있어 편리합니다.

 

보간 이란?

변수 보간(Variable Interpolation)은 SCSS에서 문자열이나 값을 동적으로 조합하기 위해 사용하는 기능으로, SCSS에서 변수를 문자열 내부에 직접 포함하고 싶을때 사용하는 문법입니다.

변수 보간의 기본 형태는 이렇습니다.

#{$variable}

// #은 보간의 시작을 의미
// {} 안에 변수나 표현식 등을 포함
// $variable은 SCSS의 변수

 

기본 변수와 보간 활용

기본적인 변수 보간의 형태를 경로 관리에 활용한 예시입니다. 이렇게만 바꾸어도 여러개의 경로를 효과적으로 관리할 수 있습니다.

// 변수 정의
$assets-path: "../assets";
$images-path: "#{$assets-path}/images";
$fonts-path: "#{$assets-path}/fonts";

// 변수 활용
body {
  background-image: url("#{$images-path}/background.jpg");
  font-family: "CustomFont", url("#{$fonts-path}/custom-font.woff2");
}

SCSS 맵 활용

맵 자료형을 활용하면 경로를 그룹으로 관리할 수 있습니다.

// 맵 정의
$paths: (
  assets: "../assets",
  images: "../assets/images",
  fonts: "../assets/fonts"
);

// 맵에서 경로 가져오기
body {
  background-image: url("#{map-get($paths, images)}/background.jpg");
  font-family: "CustomFont", url("#{map-get($paths, fonts)}/custom-font.woff2");
}

함수 활용

경로 생성을 함수로 만들어 활용할 수도 있습니다.

// 함수 정의
@function asset-path($type, $filename) {
  @return "../assets/#{$type}/#{$filename}";
}

// 사용
body {
  background-image: url(asset-path("images", "background.jpg"));
  font-family: "CustomFont", url(asset-path("fonts", "custom-font.woff2"));
}

이 코드를 CSS로 컴파일하면 이렇게 나옵니다. 👇👇

body {
  background-image: url("../assets/images/background.jpg");
  font-family: "CustomFont", url("../assets/fonts/custom-font.woff2");
}

보간의 장점

SCSS 보간은 앞서 다룬 경로 뿐 아니라 문자열, 값, 클래스 이름 등을 동적으로 조합할 수 있게 도와줍니다. 프로젝트의 크기가 커질수록 보간을 활용한 코드 관리의 이점은 더욱 커질 것입니다.