py()
패딩(Paddinig) Y축 단축 믹스인
용도
padding() 믹스인의 y
축(top
, bottom
)을 빠르게 설정하기 위한 단축 믹스인입니다.
사용법
py()
믹스인에 설정 가능한 값을 리스트로 전달합니다.
py($args:list)
.usage {
@include py(2%);
}
매개변수(parameter)
유형(type)
필수(required)
기본 값(default)
$args
list
✔︎
위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.
.usage {
padding-top: 2%;
padding-bottom: 2%;
}
Y축 속성의 개별 값을 설정할 경우
.usage {
@include py(10 15);
}
위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.
.usage {
padding-top: 10px;
padding-bottom: 15px;
}
로직
py()
믹스인은 다음의 로직에 의해 작성되었습니다.
@mixin py($value) {
$value_length: length($value);
@if $value_length == 1 {
@include p(t $value b $value);
}
@if $value_length == 2 {
@include p(t first($value) b last($value));
}
}
전달 받은 인자의 아이템 개수(length) 확인
개수가 1개인 경우, p() 믹스인의 인자 값으로 상(t), 하(b) 값 설정 호출
개수가 2개인 경우, p() 믹스인의 인자 값으로 상(t), 하(b) 값 개별 설정 호출
참고
믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.
믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.
Last updated
Was this helpful?