less를 컴파일할 때 css3의 calc가 계산되는 경우 문제를 해결하는 방법은 무엇입니까?

이번에는 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에서 원 애니메이션 효과를 만드는 방법

H5에서 휴대폰의 페이지 크기 조정을 구현하는 방법

다음의 세 가지 일반적으로 잘못된 사용법에 주의하세요. HTML5

위 내용은 less를 컴파일할 때 css3의 calc가 계산되는 경우 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!