Less가 CSS `calc()` 속성을 잘못 컴파일하는 것을 어떻게 방지할 수 있나요?

CSS calc() 속성의 덜 컴파일 방지

덜 컴파일러는 calc()를 사용하여 정의된 CSS 속성을 컴파일하려고 할 때 문제가 자주 발생합니다. 기능. 예를 들어, 입력:

body { width: calc(100% - 250px - 1.5em); }

예기치 않게 다음으로 번역될 수 있습니다.

body { width: calc(-151.5%); }

이 부정확한 변환으로 인해 바람직하지 않은 결과가 발생할 수 있습니다.

Less의 솔루션

3.00 이하 버전에서는 더 이상 평가하지 않습니다. 기본적으로 calc() 내의 표현식입니다. 따라서 제공된 입력은 컴파일 중에 변경되지 않습니다.

3.00 이전 버전의 경우 ~ 연산자를 사용하여 계산을 피할 수 있습니다.

body { width: calc(~"100% - 250px - 1.5em"); }

엄격한 수학 옵션 in Less

Less 버전 1.4.0에서는 strictMaths 옵션이 도입되었습니다. 이 옵션을 활성화하면 모든 Less 계산을 대괄호로 묶어야 합니다. 이 경우 calc() 내의 계산은 존중되며 컴파일 중에 평가되지 않습니다. 이 옵션은 기존 코드를 손상시킬 수 있으므로 주의해서 사용해야 합니다.

위 내용은 Less가 CSS `calc()` 속성을 잘못 컴파일하는 것을 어떻게 방지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!