CSS3 calc로 덜 공격적인 컴파일

CSS3 calc로 덜 공격적인 컴파일

---

이하의 내가 (사용하고 있음을 컴파일러 OrangeBits 과 점이없는 1.3.0.5가 ) 적극적으로 번역된다

body { width: calc(100% - 250px - 1.5em); }

으로

body { width: calc(-151.5%); }

분명히 바람직하지 않습니다. 컴파일 중에 속성을 무시하도록 Less 컴파일러에 신호를 보내는 방법이 있는지 궁금합니다. Less 문서와 두 컴파일러 문서를 모두 검색했는데 아무것도 찾을 수 없습니다.

Less 또는 Less 컴파일러가 이것을 지원합니까?

그렇지 않은 경우 CSS 확장기가 있습니까?

---

더 이상 calc기본적으로 내부적 으로 표현식을 평가하지 않습니다 v3.00.

---

원래 답변 ( Less v1.x...2.x) :

이 작업을 수행:

body { width: calc(~"100% - 250px - 1.5em"); }

1.4.0 이하 strictMaths에서는 모든 Less 계산이 괄호 안에 있어야하는 옵션이 있으므로 calc"즉시"작동합니다. 주요 변경 사항이므로 옵션입니다. 초기 베타 1.4.0은이 옵션을 기본적으로 설정했습니다. 릴리스 버전은 기본적으로 꺼져 있습니다.

---

calc의 일반적인 사용 사례는 100 % 너비를 취하고 요소 주위에 약간의 여백을 추가하는 것입니다.

하나는 다음과 같이 할 수 있습니다.

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);

---

동일한 결과를 가진 여러 가지 이스케이프 옵션이 있습니다.

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }

---

CSS3 calc () 함수는 Less # 974에서 작동하지 않습니다 :이 게시물에서 설명 된 것처럼 이스케이프 된 calc 내에 변수를 포함하는 더 깔끔한 방법이 있습니다.

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

중괄호를 사용하면 이스케이프 따옴표를 닫았다가 다시 열 필요가 없습니다.

참고 URL : https://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc