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);
    }
  }
}

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

2. 전달 받은 인자가 있을 경우, 인자 값(리스트) 병합

3. x, y 각 축 방향 값을 분석

4. 방향 설정 값이 존재할 경우, 각 축의 방향에 맞게 마진 속성 설정

참고

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

• @mixin / @include

• @if / @else

• length()

• if()

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

• merge-list()

• first()

• last()

• m()