LESS-CSS가 `calc()` 함수를 덮어쓰는 것을 방지하는 방법은 무엇입니까?

calc() 함수의 LESS-CSS 덮어쓰기 비활성화

LESS-CSS를 사용할 때 calc() 컴파일 시 함수를 덮어쓰게 되어 잘못된 출력이 발생합니다. 이 문제를 해결하기 위해 덮어쓰기를 비활성화하는 기술이 있습니다.

해결책: 이스케이프된 문자열

효과적인 방법은 이스케이프된 문자열 내에 calc() 함수를 포함하는 것입니다. . 이스케이프된 문자열은 문자열 앞과 뒤에 물결표(~)를 배치하여 표시됩니다. 이 접근 방식은 LESS-CSS에 변경 없이 문자열 내용을 보존하도록 효과적으로 지시합니다.

예:

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

컴파일 시 다음이 출력됩니다.

width: calc(100% - 200px);

원하는 대로.

추가 고려 사항

이스케이프된 문자열에 Less 수학을 통합해야 하는 경우 이스케이프된 문자열과 수학 연산을 조합하여 사용할 수 있습니다. 예:

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

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

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

Less는 기본적으로 값(이스케이프된 문자열 및 수학 결과)을 공백으로 연결합니다.

위 내용은 LESS-CSS가 `calc()` 함수를 덮어쓰는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!