# ease-merge()

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

[ease()](https://yamoo9.gitbook.io/scss-mixins/utilities/easing/ease) 유틸리티 함수를 통해 호출할 수 있는 사용자 정의 이징 키워드 및 이징 함수를 다수 추가할 때 사용합니다.

{% hint style="info" %}
단 하나의 이징 함수 키워드를 추가할 경우 [ease-add()](https://yamoo9.gitbook.io/scss-mixins/utilities/easing/ease-add) 유틸리티를 사용합니다.
{% endhint %}

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

`ease-merge()` 함수에 복수의 이징 키워드, 이징 함수로 구성 된 맵(map)을 전달합니다. ([환경 구성 참고](https://yamoo9.gitbook.io/scss-mixins/getting-started/configure#custom-easings))

> ease-merge($extend-easings:**map**) → **map**

```javascript
// 새롭게 추가할 커스텀 이징 키워드,함수 맵
$new-easings-map: (
  'in-euid': cubic-bezier(0.43, 0.16, 0.7, 0.52),
  'out-euid': cubic-bezier(0.31, 0.16, 0.56, 0.99),
  'inout-euid': cubic-bezier(0.94, 0.01, 0.47, 1.13),
);

// ease-merge() 유틸리티에 $new-easings-map 전달
$easings: ease-merge($new-easings-map);
```

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

#### 커스텀 이징 함수&#x20;

[easings.co](https://easings.co/) 웹 서비스를 사용하면 손쉽게 UI에 반영된 커스텀 이징 함수 P1, P2 값을 추출할 수 있습니다.

![cubic-bezier(0.43, 0.16, 0.7, 0.52)](https://2440961073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPCHAjVH3x4ELWDYek5%2F-MPMdvqRjoHTaB2Ne6Ef%2F-MPMh83-HmizE8vkrB49%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-12-25%2009.47.23.png?alt=media\&token=1c568387-80ad-4c75-8470-5b146c2fabee)

![cubic-bezier(0.11, 0.24, 0.56, 0.99)](https://2440961073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPCHAjVH3x4ELWDYek5%2F-MPMjILF8OXUarybTge-%2F-MPMmN_dvFLvBALeZ8S-%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-12-25%2009.49.32.png?alt=media\&token=b67dffa3-f6fa-41c5-b12c-8e7f2688bfee)

![cubic-bezier(0.94, 0.01, 0.47, 1.13)](https://2440961073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPCHAjVH3x4ELWDYek5%2F-MPMjILF8OXUarybTge-%2F-MPMnyD6nOIZ68JGbtiq%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-12-25%2011.52.07.png?alt=media\&token=a63e8a6e-125c-4d70-9a2c-41a6f109dc12)

`ease-merge()` 유틸리티 함수로 추가된 커스텀 이징 키워드를 사용한 예시

```javascript
.usage {
  transition: all 0.6s ease(inout-euid); // cubic-bezier(0.94, 0.01, 0.47, 1.13)
}
```

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

`ease-merge()` 유틸리티는 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@use 'sass:map';
@use 'sass:meta';

@function ease-merge($extend-easings: ()) {
  @if not meta.global-variable-exists('easings') {
    @error '$easings 이징 함수 맵 글로벌 변수가 존재하지 않습니다.';
  }
  @return map.deep-merge($easings, $extend-easings);
}
```

1. Sass 맵에 새로운 키(key)를 추가하려면 `sass:map` 모듈 호출 필요
2. 전역 변수가 존재하는지 확인하려면 `sass:meta` 모듈 호출 필요
3. 전역 변수 `$easings`가 존재하지 않을 경우, 오류 메시지 출력
4. 전달 받은 이징 키워드, 이징 함수 맵을 `$easings` 맵과 병합(deep merge)
5. 새로운 키가 추가된 맵(map)을 반환

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

유틸리티 함수 로직에 사용된 Sass의 흐름 제어(Flow Control) 문은 다음과 같습니다.

* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)

유틸리티 함수 로직에 사용된 Sass:map, Sass:meta 함수는 다음과 같습니다.

* [map.deep-merge()](https://sass-lang.com/documentation/modules/map#deep-merge)
* [meta.global-variable-exists()](https://sass-lang.com/documentation/modules/meta#global-variable-exists)