LESS CSS가 `calc()` 표현식을 수정하는 것을 어떻게 방지할 수 있나요?

LESS CSS Calc() 컴파일 문제 극복

LESS 코드 내에서 calc()를 활용하려고 하면 개발자가 다음과 같은 문제에 직면할 수 있습니다. LESS 컴파일러가 계산을 변경하여 잘못된 출력이 발생합니다. 예를 들어, 다음 코드는

width: calc(100% - 200px);

다음과 같이 렌더링됩니다.

width: calc(-100%);

이 문제를 해결하려면 LESS 내에서 이스케이프된 문자열을 사용할 수 있습니다. 이 접근 방식을 사용하면 calc() 표현식을 문자열로 처리하여 컴파일러가 이를 조작하는 것을 방지할 수 있습니다.

width: ~"calc(100% - 200px)";

이렇게 하면 최종 출력이 원본 코드와 일관되게 유지됩니다. 또한 아래 설명과 같이 Less 수학을 이스케이프된 문자열과 결합할 수 있습니다.

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

이것은 다음과 같이 컴파일됩니다.

width: calc(100% - 15rem + 15px + 2em);

Less는 기본적으로 값을 공백과 연결하여 활성화합니다. 이스케이프된 문자열과 계산 결과의 완벽한 통합. 이 기술을 구현하면 LESS의 calc() 표현식 덮어쓰기가 효과적으로 비활성화됩니다.

위 내용은 LESS CSS가 `calc()` 표현식을 수정하는 것을 어떻게 방지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!