CSS Var() 사용 시 마이너스(Nagative) 수치 사용

qpress 2020년 1월 21일 51

CSS에 아래와 같이 마이너스 숫자를 사용하는 경우가 있다.

#div1 {
    margin-top : -10px;
}

그런데 아래와 같이 CSS Var()를 사용하여 마이너스 표시하면 이를 제대로 인식하지 못한다.

#div1 {
    margin-top : -var(--margin-top);
}

이경우는 css var()의 수식 함수인 calc을 사용해야 한다.

#div1 {
    margin-top : calc(var(--margin-top) * -1);
}