적은 컴파일러가 CSS `calc()` 속성을 잘못 평가하는 것을 어떻게 방지할 수 있습니까?

Less 및 CSS Calc() 속성: 공격적인 컴파일 방해

OrangeBits 및 dotless와 같은 적은 컴파일러는 컴파일 및 평가를 시도할 수 있습니다. CSS calc() 속성으로 인해 잘못된 결과가 발생합니다. 이 문서에서는 이러한 동작을 방지하고 원하는 CSS 스타일을 유지하는 방법을 살펴봅니다.

Less의 기본 동작

Less는 calc() 내에서 표현식을 사전에 평가하는 데 사용되어 잘못된 결과를 초래합니다. . 예를 들어 body { width: calc(100% - 250px - 1.5em); }는 body { width: calc(-151.5%);로 잘못 변환됩니다. }.

Less를 위한 솔루션

이렇게 하세요:

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

~ 연산자를 사용하면 Less에 해당 표현식을 무시하라는 신호를 보냅니다. 편집.

Less v3.00 및 나중에

Less는 더 이상 기본적으로 calc() 내의 표현식을 자동으로 평가하지 않습니다. 따라서 Less v3.00 이상에서는 공격적인 컴파일을 방지하기 위해 특별한 조치가 필요하지 않습니다.

Strict Maths Option

Less 1.4.0에는 모든 Less 계산을 대괄호로 묶어야 하는 strictMaths 옵션입니다. 이 옵션을 사용하면 calc()가 수정 없이 의도한 대로 작동합니다. 기본적으로 이 옵션은 Less 1.4.0 릴리스 버전에서는 꺼져 있습니다.

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