> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/utilities/units/em.md).

# em()

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

## 용도 <a href="#use" id="use"></a>

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

#### 사용 예 <a href="#examples" id="examples"></a>

* 요소에 설정된 글자 크기에 상대적인 공간 수치 설정이 필요한 경우 (예: `padding`)
* 요소에 직접 글자 크기를 설정할 때는 `rem` 단위 사용, 패딩(내부 여백)은 `em` 단위 사용 권장
* 참고: [Rem 그리고 Em, 언제 써야 할까?](https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984)

## 사용법 <a href="#usage" id="usage"></a>

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

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

```css
.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 |

{% hint style="info" %}
$base-rem-size는 [환경 구성을 통해 정의 된 글로벌 변수(Global Variable)](/scss-mixins/getting-started/configure.md#units)입니다.
{% endhint %}

## 로직 <a href="#logic" id="logic"></a>

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

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

1. px 단위 값을 전달 받음 (계산에 사용되는 기준 값은 옵션으로 사용자에 의해 변경 가능)
2. [remove-unit()](/scss-mixins/utilities/units/remove-unit.md) 유틸리티 함수를 실행해 단위를 제거한 후, `1em`을 곱해 결과 값을 반환

## 참고 <a href="#reference" id="reference"></a>

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

* [@function](https://sass-lang.com/documentation/at-rules/function)

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

* [remove-unit()](/scss-mixins/utilities/units/remove-unit.md)