[css] CSS3 calc로 덜 공격적인 컴파일

Program / 글쓴이

이하의 내가 (사용하고 있음을 컴파일러 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");}

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

답변