text()

CSS 텍스트(Text) 속성 믹스인

용도

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

Text 속성

속성	표준 값
text-align	start | end | left | right | center | justify | match-parent | justify-all
text-align-last	auto | start | end | left | right | center | justify | match-parent
text-indent	<length-percentage>
text-transform	none | [capitalize | uppercase | lowercase ]
overflow-wrap (word-wrap)	normal | break-word | anywhere
letter-spacing	normal | <length>
word-spacing	normal | <length>
line-break	auto | loose | normal | strict | anywhere
word-break	normal | keep-all | break-all | break-word
white-space	normal | pre | nowrap | pre-wrap | break-spaces | pre-line
tab-size	<number> | <length>

사용법

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

text($args:list)

.usage {
  @include text(align center indent em(16) ls em(4) ws em(6));
}

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

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

.usage {
  text-align: center;
  text-indent: 1em;
  letter-spacing: 0.25em;
  word-spacing: 0.375em;
}

믹스인에 전달 가능한 속성

전달 속성

align

align-last

indent

transform

letter-spacing 또는 ls

word-spacing 또는 ws

line-break 또는 lb

word-break 또는 wb

word-wrap 또는 ww

overflow-wrap 또는 ow

white-space

tab-size 또는 ts

hyphens

로직

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

@mixin text($args) {
  $props: align align-last indent transform letter-spacing ls word-spacing ws line-break lb word-break wb word-wrap ww overflow-wrap ow white-space tab-size ts hyphens;

  word-break: keep-all;
  word-wrap: break-word;
  overflow-wrap: break-word;

  @each $prop in $props {
    $prop-index: index($args, $prop);

    @if $prop-index {
      $value: nth($args, $prop-index + 1);

      @if $prop == 'letter-spacing' or $prop == 'ls' {
        letter-spacing: $value;
      } @else if $prop == 'word-spacing' or $prop == 'ws' {
        word-spacing: $value;
      } @else if $prop == 'line-break' or $prop == 'lb' {
        line-break: $value;
      } @else if $prop == 'word-break' or $prop == 'wb' {
        word-break: $value;
      } @else if
        $prop == 'word-wrap' or $prop == 'ww' or
        $prop =='overflow-wrap' or $prop == 'ow'
      {
        word-wrap: $value;
        overflow-wrap: $value;
      } @else if $prop == 'hyphens' {
        hyphens: $value;
      } @else if $prop == 'white-space' {
        white-space: $value;
      } @else if $prop == 'tab-size' or $prop == 'ts' {
        tab-size: $value;
      } @else {
        text-#{$prop}: $value;
      }
    }
  }
}

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

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

참고

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

• @mixin / @include

• @each

• @if / @else

• index()

• nth()