Less가 CSS calc() 속성을 컴파일하려는 것을 방지하는 방법은 무엇입니까?

Less가 CSS calc() 속성을 컴파일하려는 것을 방지하는 방법은 무엇입니까?

내가 사용하는 Less 컴파일러(OrangeBits 및 점 없는 1.3.0.5)는 공격적으로 번역하고 있습니다.

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

안으로

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

그것은 분명히 바람직하지 않습니다.Less 컴파일러에게 컴파일 중 속성을 본질적으로 무시하도록 신호를 보낼 수 있는 방법이 있는지 궁금합니다.저는 Less 문서와 두 컴파일러 문서를 모두 검색했지만 아무것도 찾을 수 없었습니다.

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

만약 그렇지 않다면, CSS 익스텐더가 있습니까?

더 이상 내부 표현식을 평가하지 않음calc… 이후의 부전으로

---

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

수행할 작업:

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

1.4.0 미만에서는strictMaths모든 Less 계산이 괄호 안에 있어야 하는 옵션입니다.calc즉시 사용할 수 있습니다.이것은 중대한 변화이기 때문에 선택 사항입니다.1.4.0의 초기 베타에는 기본적으로 이 옵션이 설정되어 있었습니다.릴리스 버전은 기본적으로 해제되어 있습니다.

계산의 매우 일반적인 사용 사례는 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 계산() 함수는 Less #974에서 작동하지 않습니다.

@variable: 2em;

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

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

@variable: 2em;

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

참조:~ 연산자에 대해 ~"calc(100% - @spacing)"와 같이 작은 값의 변수를 사용할 수 있는 방법이 있습니까?

언급URL : https://stackoverflow.com/questions/11972084/how-to-prevent-less-from-trying-to-compile-css-calc-properties