p()

패딩(Paddinig) 단축 믹스인

용도

padding() 믹스인을 빠르게 사용하기 위한 단축 믹스인입니다.

사용법

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

p($args:list)

.usage {
  @include p(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	padding-top
right 또는 r	number, number(unitless), string	padding-right
bottom 또는 b	number, number(unitless), string	padding-bottom
left 또는 l	number, number(unitless), string	padding-left
x	number, number(unitless), string	padding-right, padding-left
y	number, number(unitless), string	padding-top, padding-bottom

로직

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

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

1. 전달 받은 인자가 없을 경우, 오류 메시지 출력

2. 전달 받은 인자가 있을 경우, padding() 믹스인 호출

참고

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

• @mixin / @include

• @if / @else

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

• padding()