# grid-areas()

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

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

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

`grid-areas()` 믹스인에 설정 가능한 값을 전달합니다. (CSS 표준과 달리 연속된 키워드는 `x` 표기로 처리 가능)

> grid-areas($areas:**list**)

```css
.usage {
  @include grid-areas('header x3' '. main .' 'footer x3');
}
```

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

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

```css
.usage {
  grid-template-areas: "header header header" 
                       ". main ." 
                       "footer footer footer";
}
```

#### 포함된 일부 텍스트를 반복 처리해야 할 경우 <a href="#hint" id="hint"></a>

&#x20;동일한 텍스트가 아닌, 일부 텍스트만 반복 처리해야 할 경우는 [str-repeat()](https://yamoo9.gitbook.io/scss-mixins/utilities/string/str-repeat) 유틸리티 함수를 사용합니다.

```css
.usage {
  @include grid-areas('header x4' '. #{str-repeat(2, main)} .' 'footer x4');
}
```

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

```css
.usage {
  grid-template-areas: "header header header header" 
                       ". main main ." 
                       "footer footer footer footer";
}
```

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

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

```javascript
@mixin grid-areas($areas: null) {
  $areas-list: ();

  @each $area in $areas {
    $compiled-text: str-extract-count-keyword($area);

    @if type-of($compiled-text) == 'map' {
      $compiled-text: str-repeat(
        map-get($compiled-text, count),
        map-get($compiled-text, keyword)
      );
    }

    $areas-list: append($areas-list, $compiled-text);
  }

  grid-template-areas: $areas-list;
}
```

1. 전달 받은 문자 리스트를 순환 처리
2. 문자 리스트로부터 카운트, 키워드 추출
3. 추출된 데이터 유형이 맵일 경우, 카운트 횟수 만큼 키워드 반복 처리
4. 빈 문자 리스트의 아이템으로 반복 출력된 문자 추가
5. 추출된 데이터 유형이 맵이 아닐 경우, 전달 받은 문자 리스트 그대로 반환

## 참고 <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)
* [@each](https://sass-lang.com/documentation/at-rules/control/each)
* [type-of()](https://sass-lang.com/documentation/modules/meta#type-of)
* [map-get()](https://sass-lang.com/documentation/modules/map#get)
* [append()](https://sass-lang.com/documentation/modules/list#append)

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

* [str-extract-count-keyword()](https://yamoo9.gitbook.io/scss-mixins/utilities/string/str-extract-count-keyword)
* [str-repeat()](https://yamoo9.gitbook.io/scss-mixins/utilities/string/str-repeat)