> 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/unitless-px.md).

# unitless-px()

단위가 없는 숫자 값 → px 값 반환 유틸리티 함수

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

단위가 없는 숫자 값을 `px` 단위 값으로 변경하여 반환할 때 사용합니다. (`0` 제외)

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

단위가 없는 숫자 값을 전달하면 `px` 단위 값으로 반환합니다. (`0` 제외)&#x20;

> unitless-px($value:**number**) → **number**

```javascript
@debug unitless-px(20); // → 20px 반환
@debug unitless-px(0);  // → 0 반환
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|      $value     |  number  |      ✔︎      |               |

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

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

```javascript
@function unitless-px($value) {
  @return if(unitless($value), if($value != 0, $value * 1px, $value), $value);
}
```

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)
* [if()](https://sass-lang.com/documentation/modules#if)
* [unitless()](https://sass-lang.com/documentation/modules/math#is-unitless)