이번에는 less 컴파일 시 css3 calc가 계산되는 문제를 해결하는 방법을 알려드리겠습니다. 바라보다. 프런트 엔드 사용자에게 Less 또는 Sass는 이미 필요한 기본 기술입니다. 이 도구를 사용하면 프런트 엔드 개발자의 코딩 시간을 많이 절약할 수 있어 CSS를 원활하고 원활하게 작성할 수 있습니다. Less에 calc를 추가했을 때 몇 가지 문제를 발견했습니다. 저는 Less에 이렇게 썼습니다:
div {width : calc(100% - 30px);}
결과적으로 Less는 이것을 실행할 산술 표현식으로 취급했고 결과는 다음과 같이 분석되었습니다:
div {width: calc(70%);}
I 그때 우울증이 있었는데 어떻게 이런 현상이 일어날 수 있었나요? 여러 가지 조사 끝에 less의 계산 방식이 calc 방식과 중복되어 둘이 충돌하는 것으로 확인되어 Less에서 calc의 작성 방식을 다음과 같이 다시 작성했습니다.
div {width : calc(~"100% - 30px");}
OK, 분석 결과는 정상입니다.
div {width: calc(100% - 30px);}
그런데 30px를 변수로 바꾸는 방법은 무엇입니까?
div { @diff : 30px; width : calc(~"100% - " + @diff); }
이렇게 작성하면 Webstorm은 오류를 보고하지 않았지만 grunt-less는 오류를 보고했습니다.
C:\Users\zhong\WebstormProjects\test>grunt less Running "less:development" (less) task >> ParseError: Unrecognised input in style.less on line 4, column 2: >> 3 @diff : 30px; >> 4 width : calc(~"100% - " + @diff); >> 5 } Warning: Error compiling style.less Use --force to continue. Aborted due to warnings.
그래서 이렇게 썼습니다.
div { @diff : 30px; width : calc(~"100% - " @diff); }
성공적으로 컴파일되었지만 Webstorm은 항상
Syntax error를 표시했지만. 컴파일 할 수 있는데 파일을 볼 때 뭔가 문제가 있는 것 같아요.. 오류 메시지가 항상 기분이 좋지 않아서 오랫동안 검색했는데 웹스톰에서 구문 프롬프트 오류 설정을 디버깅하는 방법을 찾을 수 없어서 변경했습니다. div {
@diff : 30px;
width : calc(~"100% - @{diff}");
}
이런 방법으로 작성하면 컴파일이 가능하고 Webstorm에서는 오류가 보고되지 않으므로 저는 이 방법을 사용하는 것을 좋아해서 더 이상 문제가 없을 것이라고 비교했습니다.
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트
Other관련 기사를 주목하세요!
관련 읽기:
다음의 세 가지 일반적으로 잘못된 사용법에 주의하세요. HTML5
위 내용은 less를 컴파일할 때 css3의 calc가 계산되는 경우 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!