# ease-add()

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

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

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

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

`ease-add()` 함수에 이징 키워드, 이징 함수를 전달합니다.

> ease-add($keyword:**string,** $easing-functio&#x6E;**:string**) → **map**

```javascript
$easings: ease-add('in-euid', cubic-bezier(0.43, 0.16, 0.7, 0.52));
```

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

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

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

![](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)

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

```javascript
.usage {
  transition: all 580ms ease(in-euid); // cubic-bezier(0.43, 0.16, 0.7, 0.52)
}
```

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

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

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

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

1. Sass 맵에 새로운 키(key)를 추가하려면 `sass:map` 모듈 호출 필요
2. 전역 변수가 존재하는지 확인하려면 `sass:meta` 모듈 호출 필요
3. 전역 변수 `$easings`가 존재하지 않을 경우, 오류 메시지 출력
4. 전달 받은 이징 키워드, 이징 함수를 `$easings` 맵의 `key`: `value`로 추가
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.set()](https://sass-lang.com/documentation/modules/map#set)
* [meta.global-variable-exists()](https://sass-lang.com/documentation/modules/meta#global-variable-exists)