Less 컴파일 시 CSS3의 calc가 계산되는 문제를 해결하는 방법

이 글은 CSS3의 Less 컴파일 과정에서 calc가 어떻게 계산되는지에 대한 관련 정보를 주로 소개하고 있습니다. 내용이 꽤 괜찮아서 참고용으로 올려드리겠습니다.

프런트 엔드 사용자에게 Less 또는 Sass는 이미 필요한 기본 기술입니다. 이 도구를 사용하면 프런트 엔드 개발자의 코딩 시간을 많이 절약할 수 있어 CSS를 원활하고 원활하게 작성할 수 있습니다. Less에 calc를 추가했을 때 몇 가지 문제를 발견했습니다. 저는 Less에서 이렇게 썼습니다:

p {width : calc(100% - 30px);}

결과적으로 Less는 이것을 산술 표현식으로 실행했고 결과는 다음과 같이 분석되었습니다.

p {width: calc(70%);}

그때 우울했는데 어떻게 이런 일이 일어날 수 있었을까? 여러 가지 조사 결과 less의 계산 방식이 calc 방식과 중복되어 둘이 충돌하는 것으로 확인되어 Less에서 calc의 작성 방식을 다음과 같이 다시 작성했습니다.

p {width : calc(~"100% - 30px");}

OK, 분석 결과. 일반:

p {width: calc(100% - 30px);}

그런데 30px를 변수로 바꾸는 방법은 무엇입니까?

　　p {
　　@diff : 30px;
　　width : calc(~"100% - " + @diff);
　　}

Webstorm은 오류를 보고하지 않았지만 grunt-less는 오류를 보고했습니다.

C:UserszhongWebstormProjectstest>grunt less

Running "less:development" (less) task

>> 4행, 2열의 style.less에서 인식할 수 없는 입력:

>> 3 @diff: 30px;

>> 4 width: calc(~"100% - " + @diff);

> ;> ; 5 }

경고: style.less 컴파일 중 오류가 발생했습니다. 계속하려면 --force를 사용하세요.

경고로 인해 중단되었습니다.

그래서 다음과 같이 썼습니다.

　　p {
　　@diff : 30px;
　　width : calc(~"100% - " @diff);
　　}

부드럽게 컴파일되었지만 Webstorm은 항상 구문을 묻는 메시지를 표시했습니다. 오류 메시지가 표시됩니다. 컴파일할 수 있지만 파일에 오류 메시지가 있어서 불편합니다

. 오랫동안 검색했지만 여전히 구문 프롬프트 오류 설정을 디버깅하는 방법을 찾을 수 없습니다. Webstorm

그래서 다음과 같이 작성했습니다.

　　p {
　　@diff : 30px;
　　width : calc(~"100% - @{diff}");
　　}

이렇게 작성하면 Webstorm에서도 오류가 보고되지 않으므로 이런 작성 방식을 선호합니다. , 더 이상 문제가 없을 것입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

CSS3의 변환 및 전환 속성과 애니메이션 속성의 차이 분석

높이를 알 수 없는 이미지를 세로로 가운데에 맞추는 방법

calc() 메서드에 대해 CSS3

위 내용은 Less 컴파일 시 CSS3의 calc가 계산되는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!