unitless-px()

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

용도

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

사용법

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

unitless-px($value:number) → number

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

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

로직

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

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

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

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

참고

유틸리티 함수 로직에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

• @function
• if()
• unitless()