[SCSS] keyframe 애니메이션에서 calc와 var 함께 쓰는 방법

드로워 컴포넌트를 구현하면서 드로워 손잡이에 대한 요구사항을 구현하게 되었다.
현재 얼만큼 드로워가 보일건지 계산해 전역 변수로 저장해 사용하고 있는데 손잡이가 있는 드로워에서 애니메이션이 깜빡거리는 현상이 발생했다.

// 전역변수로 저장하는 코드
if (drawerHandleSize) {
	document.body.style.setProperty('--drawer-handle', `${drawerHandleSize}px`)
} else {
	document.body.style.removeProperty('--drawer-handle')
}

//기존 애니메이션 코드
@keyframes openLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes closeLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

//기존 드로워 위치 scss
left: 0; // 열렸을 때

left: calc(-1 * var(--drawer-width, 100%) + var(--drawer-handle, -50px)); //닫혔을 때

이유는 만약 손잡이가 있을 때 -100%에서 0으로 움직이게 된다면 노출되어있던 드로워가 화면에서 아예 사라졌다가 열리기 때문에 깜빡거리는 것이었다.

닫혔을 때 스타일링 처럼 애니메이션에서도 처리를 해줘야했다.

그래서 시도한 것이 calc() 와 var()를 함께 사용하는 방법이었다.

@keyframes openLeft {
  from {
    transform: translateX(calc(-100% + var(--drawer-handle, 0)));
  }
  to {
    transform: translateX(0);
  }
}

근데 이렇게 하면 안되는거다. 왜 안되는거지 calc()와 var를 사용하지 못하는 건가? var()에 해당 변수 값이 없으면 뒤에있는 기본값 0이 적용되는 것으로 알고있었는데 안돌아가서 당황했다.

이런저런 삽질을 해본 결과,, 문제는 정말 어이없는 부분이었다.var의 기본값에 변수를 안적은 것..

calc를 이용해 계산할 때는 그냥 숫자만 사용하면 안되고 단위값까지 써야한다.

이걸 몰라서 헛짓거리 한거다ㅋㅋㅋ

@keyframes openLeft {
  from {
    transform: translateX(calc(-100% + var(--drawer-handle, 0px)));
  }
  to {
    transform: translateX(0);
  }
}

그래서 이렇게 뒤에 단위 붙이니까 잘 돌아갔음ㅠ