Less로 컴파일할 때 CSS3에서 calc 계산을 피하는 방법

이번에는 Less로 컴파일할 때 CSS3의 calc가 어떻게 계산되지 않는지 보여드리겠습니다. CSS3의 calc를 Less로 컴파일할 때 계산하면 안 되는 Notes는 무엇입니까? 다음은 실제 사례입니다.

프런트 엔드 사용자에게 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}");
　　}

이런 방법으로 작성하면 다시 컴파일이 가능하므로 웹스톰에서는 오류가 없기 때문에 문제가 없을 것 같아 이 방법을 선호합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

css3의 애니메이션 시퀀스 애니메이션

CSS 이상한 상자 모델과 표준 상자 모델을 사용하는 방법

위 내용은 Less로 컴파일할 때 CSS3에서 calc 계산을 피하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!