space()
공간(Space) 믹스인
용도
컨테이너 요소 내부에 포함된 자식 요소(들) 사이 공간(Space)을 설정할 때 사용하는 믹스인입니다.
사용법
space()
믹스인에 설정 가능한 값을 리스트로 전달합니다.
space($x:[number, list], $y:[number, list])
.usage {
@include space(20 r);
}
매개변수(parameter)
유형(type)
필수(required)
기본 값(default)
$x
[number, list]
✔︎
$y
[number, list]
전달 받은 값이 없을 경우, $x 값을 사용
위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.
.usage > :not([hidden]) ~ :not([hidden]) {
margin-right: 0;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 0;
}
믹스인에 설정 가능한 속성 키워드 별 공간 방향 설정
속성 키워드
컴파일 속성
normal
공간 방향 (margin-right
, margin-bottom
)
reverse
또는 r
공간 방향 반전 (margin-left
, margin-top
)
로직
space()
믹스인은 다음의 로직에 의해 작성되었습니다.
@mixin space($x: (), $y: ()) {
$x: merge-list(null normal, if(length($x) > 1, $x, $x normal));
$y: merge-list(null normal, if(length($y) > 1, $y, $y normal));
& > :not([hidden]) ~ :not([hidden]) {
$x-value: first($x);
$x-reverse: last($x);
@if $x-value != null {
// 반전 설정 유무에 따라 값을 1 또는 0으로 변경
$space-x-reverse: if($x-reverse != normal, 0, 1);
$left-value: $x-value * (1 - $space-x-reverse);
$right-vlaue: $x-value * $space-x-reverse;
@include m(l $left-value r $right-vlaue);
}
$y-value: first($y);
$y-reverse: last($y);
@if length($y-value) == 0 {
$y-value: $x-value;
$y-reverse: $x-reverse;
}
@if $y-value != null {
// 반전 설정 유무에 따라 값을 1 또는 0으로 변경
$space-y-reverse: if($y-reverse != normal, 0, 1);
$top-value: $y-value * (1 - $space-y-reverse);
$bottom-vlaue: $y-value * $space-y-reverse;
@include m(t $top-value b $bottom-vlaue);
}
}
}
전달 받은 인자가 없을 경우, 기본 설정 값 사용
전달 받은 인자가 있을 경우, 인자 값(리스트) 병합
x, y 각 축 방향 값을 분석
방향 설정 값이 존재할 경우, 각 축의 방향에 맞게 마진 속성 설정
참고
믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.
믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.
Last updated
Was this helpful?