> 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/css-grid/grid-container/grid-container-append/gap.md).

# gap()

gap 속성 믹스인

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

[gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) (또는 [row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap), [column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap)) 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

| 믹스인에서 사용되는 값                    | 컴파일 되는 표준 속성               |
| ------------------------------- | -------------------------- |
| `10` 또는 `10px 5px` 또는 `rem(14)` | gap 또는 row-gap, column-gap |

{% hint style="info" %}
gap() 믹스인은 [grid-container-append()](/scss-mixins/mixins/css-grid/grid-container/grid-container-append.md) 믹스인 내부에서 활용되는 작은 모듈입니다.
{% endhint %}

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

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

> gap($value:\[**number, list]**)

```javascript
.usage {
  @include gap(10 5); 
  // CSS 컴파일 결과
  // row-gap: 10px;
  // column-gap: 5px;
}
```

| 매개변수(parameter) |      유형(type)     | 필수(required) | 기본 값(default) |
| :-------------: | :---------------: | :----------: | :-----------: |
|      $value     | \[string, number] |      ✔︎      |               |

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

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

```javascript
@mixin gap($value: null) {
  @if $value == null {
    @error 'gap() 믹스인은 숫자 값을 1 또는 2개의 값을 전달 받아야 합니다.';
  }
  @if length($value) == 1 {
    gap: unitless-px($value);
  }
  @if length($value) == 2 {
    row-gap: unitless-px(nth($value, 1));
    column-gap: unitless-px(nth($value, 2));
  }
}
```

1. 전달 받은 인자 값이 숫자, 리스트 유형일 경우 개별 조건 처리
2. 조건 유형에 맞지 않을 경우, 오류 메시지 출력

## 참고 <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)
* [nth()](https://sass-lang.com/documentation/modules/list#nth)

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

* [unitless-px()](/scss-mixins/utilities/units/unitless-px.md)