px()

패딩(Paddinig) X축 단축 믹스인

용도

padding() 믹스인의 x축(left, right) 값을 빠르게 설정하기 위한 단축 믹스인입니다.

사용법

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

px($args:list)

.usage {
  @include px(4.5%);
}

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

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

.usage {
  padding-right: 4.5%;
  padding-left: 4.5%;
}

X축 속성의 개별 값을 설정할 경우

.usage {
  @include px(5% 10%);
}

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

.usage {
  padding-right: 10%;
  padding-left: 5%;
}

로직

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

@mixin px($value) {
  $value_length: length($value);
  @if $value_length == 1 {
    @include p(l $value r $value);
  }
  @if $value_length == 2 {
    @include p(l first($value) r last($value));
  }
}

1. 전달 받은 인자의 아이템 개수(length) 확인

2. 개수가 1개인 경우, p() 믹스인의 인자 값으로 좌(l), 우(r) 값 설정 호출
3. 개수가 2개인 경우, p() 믹스인의 인자 값으로 좌(l), 우(r) 값 개별 설정 호출

참고

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

• @mixin / @include
• @if / @else
• length()

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

• p()