LESS에서의 수학 연산 취소

때로는 LESS가 계산 명령으로 해석하지 않아야 하는 어떤 수학 연산이 있는 상황이 발생합니다. 예를 들어, 이러한 문제는 CSS 함수 calc에서 발생합니다:

div {
	width: calc(100% - 10px);
}

다행히도 LESS는 이러한 부분을 올바르게 처리하며 컴파일 시 계산을 수행하지 않습니다.

그러나 계산이 필요하지 않은 표현식이 다른 곳에 있는 상황도 있습니다. 예를 들어, 변수 안에 다음과 같이 있는 경우가 있습니다:

@exp: 100% - 10px;
div {
	width: calc(@exp);
}

이 경우 변수에는 계산 결과가 저장되고, calc에는 계산된 값이 있는 변수가 전송됩니다. 이러한 일이 발생하지 않도록 하려면, 표현식이 변경되지 않은 상태로 유지되어야 함을 명시적으로 지정할 수 있습니다.

이를 위해서는 표현식을 따옴표로 묶고 그 앞에 물결표(~) 기호를 붙여야 합니다:

@exp: ~'100% - 10px';
div {
	width: calc(@exp);
}

코드가 올바르게 작동하도록 수정하세요:

@exp1: 80% + 10px;
@exp2: 30vh - 10px;

div {
	width: calc(@exp1);
	margin-top: calc(@exp2);
}