em()

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

용도

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

사용 예

• 요소에 설정된 글자 크기에 상대적인 공간 수치 설정이 필요한 경우 (예: padding)

• 요소에 직접 글자 크기를 설정할 때는 rem 단위 사용, 패딩(내부 여백)은 em 단위 사용 권장

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

사용법

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

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

.usage {
  width: em(348px);          // → 21.75em 반환 ( 348 / 16 = 21.75 )
  font-size: em(32px, 17px); // → 1.882352941em 반환 ( 32 / 17 = 1.882352941 )
}

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

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

로직

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

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

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

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

참고

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

• @function

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

• remove-unit()