font-size-padding()

글자 크기(font-size) 기준 패딩(padding) 설정 믹스인

용도

글자 크기(rem 단위)를 기준으로 패딩(em 단위)을 설정해야 할 때, 편리하게 활용하기 위한 믹스인입니다.

사용법

font-size-padding() 믹스인에 글자 크기와 패딩 값을 px 단위로 전달합니다. (단위 생략 가능)

font-size-padding($font-size:number, $padding:[number, string, list])

.usage {
  @include font-size-padding(20, 10 16 8);
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$font-size	number	✔︎
$padding	number, string, list	✔︎

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.usage {
  padding: 0.5em 0.8em 0.4em;
  font-size: 1.25rem;
}

font-size-padding() 믹스인 이름이 긴 경우, fsp() 별칭(단축 이름) 믹스인을 활용할 수도 있습니다.

.usage {
  @include fsp(20, 10 16 8);
}

로직

font-face() 믹스인은 다음의 로직에 의해 작성되었습니다.

@mixin font-size-padding($font-size, $padding) {
  // 전달 받은 $padding 유형 검사
  $type-collection: list number string;

  // 개발자가 요구하는 데이터 유형이 올바르게 전달된 경우 → 처리
  @if is-valid-types($padding, $type-collection) {
    $padding-type: type-of($padding);
    // 숫자인 경우
    @if $padding-type == 'number' {
      padding: em($padding, $font-size);
    }

    // 문자인 경우
    @if $padding-type == 'string' {
      padding: $padding;
    }

    // 리스트인 경우
    @if $padding-type == 'list' {
      // 새롭게 반환할 리스트 정의
      $convert-padding-list: ();

      @each $value in $padding {
        // 값이 숫자인 경우 (예: 10px)
        @if type-of($value) == 'number' {
          $convert-padding-list: append($convert-padding-list, em($value, $font-size));
        }

        // 값이 문자인 경우 (예: auto)
        @if type-of($value) == 'string' {
          $convert-padding-list: append($convert-padding-list, $value);
        }
      }

      padding: $convert-padding-list;
    }
  }
  // 개발자가 요구하지 않은 데이터 유형이 전달된 경우 → 오류 표시
  @else {
    @error '전달 받은 #{$padding} 값은 요구되는 #{join($type-collection, [], $separator: comma, $bracketed: true)} 유형이 아닙니다.';
  }

  // ----------------------------------------------

  // $font-size 전달 인자: 유효성 검사(validation)
  @if type-of($font-size) != 'number' {
    @error '전달 받은 #{$font-size} 값은 숫자 유형이 아닙니다.';
  }
  // $font-size 값을 설정
  font-size: rem($font-size);
}

1. 전달 받은 글자 크기, 패딩 값을 계산하여 처리

2. 패딩 간격은 글자 크기를 기준으로 em 단위로 환산하여 설정 (숫자 값이 아닌 문자 값은 그대로 설정)

3. 글자 크기는 rem 단위로 환산하여 설정 ($base-rem-size 기준 값으로 계산)

fsp() 믹스인은 font-size-padding() 믹스인 래퍼로 보다 간단하게 쓰기 위해 작성되었습니다.

@mixin fsp($font-size, $padding) {
  @include font-size-padding($font-size, $padding);
}

참고

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

• @mixin / @include

• @if / @else

• @error

• type-of()

• append()

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

• is-valid-types()

• rem()

• em()