SASS 에서 이미지 크기 가져오기

최근 프로젝트에서 SASS 를 본격적으로 사용해 볼 요량으로 SASS 를 공부하는 중.

그 전에는 Less 를 주력으로 사용하고 SASS 는 보조적으로만 사용하고 있었다.

 

SASS 랑 Less 중에 뭐가 더 좋아요? 하는 질문은 의미가 없다.

하지만 많은 패키지가 SASS 를 사용하고 있는 건 사실이니 배워둬도 나쁘지 않다.

 

Less 에서 가장 유용하게 사용한 기능이라면 이미지 사이즈를 가져오는 기능.

 

.fit-background(@background, @options: no-repeat 0 0) {
  background: url(@background) @option-value;
  width: image-width(@background);
  height: image-height(@background);
}

 

mixin 을 만들어 두고 유용하게 사용하고 있었다.

그런데 SASS 에는 해당 기능이 없다.

 

2022.07.05 - [개발/Front-End] - Tip: VS Code 에서 이미지 크기 자동 입력하기.

Tip: VS Code 에서 이미지 크기 자동 입력하기.

 

매번 width 와 height 를 입력해도 되지만,

반복문의 경우에는 자동으로 입력되는게 좋으므로 기능을 찾아본다.

 

image-size

image-size 라는 패키지가 있다.

말 그대로 이미지 사이즈를 가져오는 패키지.

우선 해당 패키지를 설치한다.

 

const imageSize = require("image-size");

// 중략

sassOptions: {
  functions: {
    "get-image-data($path)": (arg) => {
      const path = arg.getValue();
      const imageData = imageSize(path);
      const returnData = new sass.types.Map(2);
      returnData.setKey(0, new sass.types.String("width"));
      returnData.setKey(0, new sass.types.Number(imageData.width, "px"));
      returnData.setKey(1, new sass.types.String("height"));
      returnData.setKey(1, new sass.types.Number(imageData.height, "px"));
      return returnData;
    },
  },
},

 

webpack 이나 vue cli 설정 파일 sassOptions 의 functions 내부에

get-image-data 같이 평소 쓰기 편한 이름으로 커스텀 함수를 생성해준다.

 

@mixin fit-background($background, $options: no-repeat 0 0) {
  $image-data: get-image-data($background);
  background: $background $options;
  width: map.get($image-data, "width");
  height: map.get($image-data, "height");
}

 

그러면 SASS 파일에서 해당 함수 이름으로 이미지 사이즈를 가져올 수 있다.

위 코드는 최대한 단순히 정리해서 적어놨으므로 필요한 부분은 커스텀해서 사용하면 되겠다.

 

그럼 아디오스.