s()

공간(Space) 단축 믹스인

용도

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

사용법

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

s($x:[number, list], $y:[number, list])

.usage {
  @include s(rem(14), rem(7) r);
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$x	[number, list]	✔︎
$y	[number, list]		전달 받은 값이 없을 경우, $x 값을 사용

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

.usage > :not([hidden]) ~ :not([hidden]) {
  margin-right: 0.875rem;
  margin-left: 0rem;
  margin-top: 0.4375rem;
  margin-bottom: 0rem;
}

믹스인에 설정 가능한 속성 키워드 별 공간 방향 설정

속성 키워드	컴파일 속성
normal	공간 방향 (margin-right, margin-bottom)
reverse 또는 r	공간 방향 반전 (margin-left, margin-top)

로직

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

@mixin s($x: (), $y: ()) {
  @include space($x, $y);
}

1. 전달 받은 인자가 없을 경우, 기본 설정 값 사용

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

참고

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

• @mixin / @include

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

• space()