# ease-add()

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

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

{% hint style="info" %}
하나 이상 여러 개의 이징 함수 키워드를 추가할 경우 [ease-merge()](/scss-mixins/utilities/easing/ease-merge.md) 유틸리티를 사용합니다.
{% 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 값을 추출할 수 있습니다.

![](/files/-MPMh83-HmizE8vkrB49)

`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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/scss-mixins/utilities/easing/ease-add.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.