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

php中世界最好的语言
풀어 주다: 2018-03-20 16:33:14
원래의
2056명이 탐색했습니다.

이번에는 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을 디버깅하는 방법을 찾을 수 없습니다.

그래서,

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

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

추천 도서:

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

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

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿