> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/spacing/space.md).

# space()

공간(Space) 믹스인

## 용도 <a href="#use" id="use"></a>

컨테이너 요소 내부에 포함된 자식 요소(들) 사이 공간(Space)을 설정할 때 사용하는 믹스인입니다.

## 사용법 <a href="#usage" id="usage"></a>

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

> space($x:**\[number, list]**, $y:**\[number, list]**)

```ruby
.usage {
  @include space(20 r);
}
```

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

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

```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`)  |

## 로직 <a href="#logic" id="logic"></a>

`space()` 믹스인은 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@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. 방향 설정 값이 존재할 경우, 각 축의 방향에 맞게 마진 속성 설정

## 참고 <a href="#reference" id="reference"></a>

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

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)
* [length()](https://sass-lang.com/documentation/modules/list#length)
* [if()](https://sass-lang.com/documentation/modules#if)

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

* [merge-list()](/scss-mixins/utilities/list/merge-list.md)
* [first()](/scss-mixins/utilities/list/first.md)
* [last()](/scss-mixins/utilities/list/last.md)
* [m()](/scss-mixins/mixins/spacing/margin-m.md)