10. 사용자 정의 함수 (@function)

믹스인(@mixin)이 CSS 스타일 블록 전체를 반환한다면, 함수(@function)는 계산된 단일 값(Value)만을 반환하는 도구입니다.

픽셀(px) 단위를 상대 단위인 리단위(rem)로 변환해주는 계산식이나, 특정 공식에 따른 복잡한 애니메이션 타이밍 값을 구할 때 @function을 정의하여 사용하면 코드가 훨씬 깨끗해지고 휴먼 에러를 방지할 수 있습니다.

- @mixin: display: flex; justify-content: center; 와 같이 CSS 속성과 값의 집합을 출력할 때 사용 (반드시 @include로 호출)
- @function: 1.5rem, #ff0000 과 같이 계산된 단일 값을 출력할 때 사용 (반드시 @return 포함)

<h1 class="main-title">rem 단위 자동 변환</h1>
<p class="desc-text">픽셀 값만 넣으면 알아서 rem으로 바꿔줍니다.</p>

/* SCSS 커스텀 함수(Function) 예시 */
/*
// 1. px을 rem으로 변환하는 함수 정의
@function rem($pxValue, $baseValue: 16) {
  // 수학적 연산을 통해 계산 후 @return 으로 반환
  // $pxValue를 $baseValue로 나누고 'rem' 문자를 붙임 (단위 제거 기법 사용)
  // SCSS 내장 모듈인 math를 사용할 수도 있습니다.
  @return ($pxValue / $baseValue) * 1rem;
}

// 2. 함수 사용하기
.main-title {
  // 32px을 원할 때 직관적으로 입력!
  font-size: rem(32);
  margin-bottom: rem(24);
}

.desc-text {
  font-size: rem(18);
  line-height: rem(28);
}
*/

/* 컴파일된 실제 CSS */
.main-title {
  font-size: 2rem; /* 32 / 16 = 2 */
  margin-bottom: 1.5rem; /* 24 / 16 = 1.5 */
}

.desc-text {
  font-size: 1.125rem; /* 18 / 16 = 1.125 */
  line-height: 1.75rem; /* 28 / 16 = 1.75 */
}