rem()

px 값 → rem 값 변경 유틸리티 함수

용도

px 단위를 가진 값을 rem 단위 값으로 계산 변경하는 데 사용합니다.

사용 예

• 문서의 루트(:root) 요소인 html 요소의 글자 크기에 상대적으로 글자 크기를 조정 할 경우

• 사용자가 정의한 브라우저의 글자 크기 설정에 따라 크기 변경이 필요한 경우

• 글자 크기는 px, em 단위가 아닌, rem 단위 사용 권장

• 참고: Rem 그리고 Em, 언제 써야 할까?

사용법

px 단위 값을 rem() 함수에 전달하면 rem 단위 값으로 계산한 후, 속성 값으로 반환합니다.

rem($px:number, $base:number) → number

.usage {
  width: rem(212px);          // → 13.25rem 반환 ( 213 / 16 = 13.25 )
  font-size: rem(15px, 10px); // → 1.5rem 반환 ( 15 / 10 = 1.5 )
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$px	number	✔︎
$base	number		$base-rem-size

$base-rem-size는 환경 구성을 통해 정의 된 글로벌 변수(Global Variable)입니다.

로직

rem() 유틸리티는 다음의 로직에 의해 작성되었습니다.

@function rem($px, $base: $base-rem-size) {
  @return (remove-unit($px / $base)) * 1rem;
}

1. px 단위 값을 전달 받음 (계산에 사용되는 기준 값은 옵션으로 사용자에 의해 변경 가능)

2. remove-unit() 유틸리티 함수를 실행해 단위를 제거한 후, 1rem을 곱해 결과 값을 반환

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

• @function

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

• remove-unit()