SCSS 활용 팁 1. @function을 활용하여 px을 rem으로 쉽게 변환하기

디바이스의 다양화에 대응하고 사용자의 브라우저 설정을 존중하는 유연한 디자인을 제공하기 위해, 현업에서도 고정값인 px(픽셀)보다 em이나 rem과 같은 비율로 크기 조정이 가능한 단위들을 자주 사용하게 되었는데요. 이 중에서도 특히, 루트 html의 폰트사이즈를 기준으로 하는 rem을 자주 사용하게 되는 것 같습니다.

1rem = ?

1rem은 html에서 설정한 font-size의 값과 동일합니다. html의 font-size가 16px 일 때, 1rem은 16px이 되고, html의 font-size를 14px로 설정하면 1rem은 14px이 됩니다. 직접적인 부모 요소의 영향을 받는 em과 달리, rem은 html font-size의 영향만 받으므로 예측하기 쉽고, 미디어쿼리를 사용해 html의 폰트사이즈만 변경해 주면 전체적인 크기가 변경되는 점을 이용해 반응형 디자인을 관리하기도 편하다는 장점이 있습니다.

활용

여러 가지 장점이 있는 rem이지만 대부분의 경우 px단위로 디자인을 하고 있기 때문에, px로 된 값을 일일이 기본 폰트사이즈인 16으로 나누어 rem으로 변환하는 과정을 거칠 수밖에 없습니다. (피그마의 dev mode 같은 툴을 사용하면 손쉽게 px을 rem으로 변환한 값을 확인할 수 있기는 합니다.) 이를 쉽게 하기 위해 html의 font-size를 10px로 설정하는 방법도 있지만, 이번에는 scss의 function을 활용해 보도록 하겠습니다.
방법은 이렇습니다.

 

//rem 단위로 변환
@function rem($px) {
  @return #{calc($px / 16)}rem;
}

//활용
div {
  width: rem(10);
}

 

사용자 함수를 만들 수 있는 @function 모듈을 사용하여 위와 같이 로직을 작성했습니다. 
rem() 함수를 정의하고, 반환하려는 픽셀 값 $px를 매개변수로 받아 @return을 사용하여 반환하겠습니다.
10px을 rem으로 변환하고자 할 경우 :

• rem(10)을 호출하면, 10px을 rem단위로 변환하는 함수가 실행됩니다.
• calc(10 / 16)이 계산되고, 그 결과는 0.625입니다.
• div의 width 속성에 0.625rem이 적용됩니다.