ease-merge()

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

용도

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

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

사용법

ease-merge() 함수에 복수의 이징 키워드, 이징 함수로 구성 된 맵(map)을 전달합니다. (환경 구성 참고)

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

// 새롭게 추가할 커스텀 이징 키워드,함수 맵
$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	✔︎

커스텀 이징 함수

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

cubic-bezier(0.43, 0.16, 0.7, 0.52)

cubic-bezier(0.11, 0.24, 0.56, 0.99)

cubic-bezier(0.94, 0.01, 0.47, 1.13)

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

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

로직

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

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

참고

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

• @if / @else

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

• map.deep-merge()
• meta.global-variable-exists()