LESS CSS 사용시 calc()가 정상동작하지 않는 현상이 나타나 해결방법에 대하여 알아봅니다.


# LESS CSS 사용시 calc()가 정상동작하지 않는 현상 해결방법

먼저 LESS에서 clac()를 사용하기 위해서는 Escape 코드가 필요한데 이때 ~ 기호를 사용합니다. 즉 아래의 CSS는 LESS에서 다음과 같이 변경하여 사용할 수 있습니다.

// CSS
width: calc('100% - 50px');

// LESS
width: calc(~'100% - 50px');

이제 해당 clac() CSS 함수는 escape되어 정상동작하게 됩니다.