by 이듬(E.UID)

font()

CSS 폰트(Font) 속성 믹스인

용도

설정 가능한 CSS 폰트(Font) 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

Font 속성

사용법

font() 믹스인에 설정 가능한 값을 리스트로 전달합니다.

font($args:list)

.usage {
  @include font(family SpoqaHanSans size rem(17) weight 300 lh 1.45);
}

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

.usage {
  font-weight: 300;
  font-size: 1.0625rem;
  font-family: SpoqaHanSans;
  line-height: 1.45;
}

믹스인에 전달 가능한 속성

로직

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

@mixin font($args) {
  $props: style weight variant size size-adjust family stretch kerning line-height lh;

  @each $prop in $props {
    $prop-index: index($args, $prop);
    @if $prop-index {
      $value: nth($args, $prop-index + 1);
      @if $prop == 'line-height' or $prop == 'lh' {
        line-height: $value;
      } @else {
        font-#{$prop}: $value;
      }
    }
  }
}

  1. 전달 받은 인자 값이 포함하는 키워드와 설정 가능한 폰트 속성 키워드를 비교

  2. 설정 가능한 속성 키워드와 인자의 키워드 값이 일치하는 경우, 조건에 따라 속성 설정

참고

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

Previous폰트 (Font)Nextfont-face()

Last updated