ease-add()

싱글 커스텀 이징 함수 추가 유틸리티 함수

용도

ease() 유틸리티 함수를 통해 호출할 수 있는 사용자 정의 이징 키워드 및 이징 함수를 추가할 때 사용합니다.

하나 이상 여러 개의 이징 함수 키워드를 추가할 경우 ease-merge() 유틸리티를 사용합니다.

사용법

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

ease-add($keyword:string, $easing-function:string) → map

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

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

커스텀 이징 함수

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

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

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

로직

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

@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)을 반환

참고

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

• @if / @else

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

• map.set()

• meta.global-variable-exists()