# auto-flow()

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

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

| 키워드 값          | 출력 값           |
| -------------- | -------------- |
| `row`          | `row`          |
| `column`       | `column`       |
| `dense`        | `dense`        |
| `row-dense`    | `row dense`    |
| `column-dense` | `column dense` |
| `inherit`      | `inherit`      |
| `initial`      | `initial`      |
| `unset`        | `unset`        |

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

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

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

> auto-flow($value:**string**)

```javascript
.usage {
  @include auto-flow(row-dense);
}
```

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

위 코드는 다음의 CSS 코드로 출력됩니다.

```css
.usage {
  grid-auto-flow: row dense;
}
```

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

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

```javascript
@mixin auto-flow($value: null) {
  $keywords: (
    row,
    column,
    dense,
    row-dense,
    column-dense,
    inherit,
    initial,
    unset
  );
  
  @if $value == null or not is-valid-keywords($value, $keywords) {
    @error 'auto-flow() 믹스인은 #{$keywords} 값만 전달 받을 수 있습니다.';
  }

  grid-auto-flow: str-replace($value, '-', ' ');
}
```

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)