@euid/scss-mixins

⌘Ctrlk

padding()

패딩(Padding) 믹스인

용도

패딩(padding)의 개별 속성을 빠르게 설정할 때 사용하는 믹스인입니다.

사용법

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

padding($args:list)

.usage {
  @include padding(l 20 r 24 y 10);
}

매개변수(parameter)

유형(type)

필수(required)

기본 값(default)

$args

list

✔︎

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

.usage {
  padding-top: 10px;
  padding-right: 24px;
  padding-bottom: 10px;
  padding-left: 20px;
}

믹스인에 설정 가능한 속성 키워드 및 값 유형

속성 키워드

값 유형

컴파일 속성

top 또는 t

number, number(unitless), string

margin-top

right 또는 r

number, number(unitless), string

margin-right

bottom 또는 b

number, number(unitless), string

margin-bottom

left 또는 l

number, number(unitless), string

margin-left

x

number, number(unitless), string

margin-right, margin-left

y

number, number(unitless), string

margin-top, margin-bottom

로직

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

전달 받은 인자가 없을 경우, 오류 메시지 출력
전달 받은 인자가 있을 경우, 인자의 타입을 확인
타입이 숫자 또는 문자인 경우, get-number-or-string() 믹스인 처리
타입이 리스트인 경우, 전달 인자의 키워드를 분석하여 개별 속성 처리

참고

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

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

Previousmy()Nextp()

Last updated 5 years ago

@mixin padding($args...) {
  @if length($args) == 0 {
    @error 'padding() 믹스인은 padding 속성의 설정 방향 top, right, bottom, left와 값을 연이어 전달 받을 수 있습니다. 뿐만 아니라 x, y 방향으로 속성을 일괄 설정 가능합니다.';
  }

  @each $value in $args {
    $type: type-of($value);

    @if $type == 'number' or $type == 'string' {
      padding: get-number-or-string($value);
    }

    @if $type == 'list' {
      @if is-include-items($value, top t) {
        padding-top: get-number-or-string(
          get-match-value-of-keys($value, top t)
        );
      }
      @if is-include-items($value, right r) {
        padding-right: get-number-or-string(
          get-match-value-of-keys($value, right r)
        );
      }
      @if is-include-items($value, bottom b) {
        padding-bottom: get-number-or-string(
          get-match-value-of-keys($value, bottom b)
        );
      }
      @if is-include-items($value, left l) {
        padding-left: get-number-or-string(
          get-match-value-of-keys($value, left l)
        );
      }
      @if is-include-items($value, x) {
        $x-value: get-value-after-key($value, x);
        padding-left: get-number-or-string($x-value);
        padding-right: get-number-or-string($x-value);
      }
      @if is-include-items($value, y) {
        $y-value: get-value-after-key($value, y);
        padding-top: get-number-or-string($y-value);
        padding-bottom: get-number-or-string($y-value);
      }
    }
  }
}