SCSS 활용 팁 3. 변수와 믹스인 사용으로 배경 이미지 경로 관리하기

css 작업시 이미지 경로를 여러곳에 써야 할때, 어찌보면 별거 아닌 일이지만 매우 귀찮은 일임에는 틀림 없을 것입니다.  거기다가 중간에 경로가 변경이라도 된다면, 작업한 경로를 하나하나 찾아 바꿔줘야 하겠지요.  이럴 경우에도 scss가 도움을 줄 수 있습니다.

 

변수로 이미지 경로 관리하기

scss에서 이미지 경로를 변수로 정의해 둔다면, 경로를 반복해서 입력할 필요 없이 변수만 입력하면 됩니다. 경로가 바뀌었을 경우에도, 변수를 정의한 부분만 수정해주면 되니 유지보수에도 유리합니다.

// 이미지경로 변수 정의
$image-path: "../assets/images";

// 변수 사용
.background {
  background-image: url("#{$image-path}/background.jpg");
  background-size: cover;
  background-position: center;
}

경로를 $image-path라는 변수로 정의해 두고 사용해 보았습니다. 단순히 변수 이름만 사용한다면 scss가 변수의 값을 문자열로 합치지 못하므로, #{$변수} 형식을 사용하여 scss가 변수를 문자열로 변환하여 결합하도록 합니다.

 

믹스인으로 스타일까지 관리하기

이번에는 경로 뿐만 아니라, 배경이미지를 사용할 때 반복적으로 쓰이는 코드까지 믹스인으로 만들어 사용해 봅시다.

// 믹스인 정의
@mixin background-image($image-name, $size: cover, $position: center) {
  background-image: url("#{$image-path}/#{$image-name}");
  background-size: $size;
  background-position: $position;
  background-repeat: no-repeat;
}

// 사용 예시
.header {
  @include background-image("header-bg.jpg");
}

.footer {
  @include background-image("footer-bg.jpg", contain, bottom);
}

background-image라는 믹스인에, 이미지파일명 $image-name, 배경 사이즈 $size, 배경 위치 $position을 인자로 넣었습니다. 항상 변경되는 부분인 $image-name을 제외하고는 기본값을 지정하였습니다.

이제 사용 예시처럼 이미지의 파일명만 넣어주면, 코드를 반복적으로 작성하지 않고 쉽게 쓸 수 있겠네요.

/* css */

.header {
  background-image: url("assets/images/header-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer {
  background-image: url("assets/images/footer-bg.jpg");
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}