CSS3 calc로 덜 공격적인 컴파일

336

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

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

으로

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

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

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

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

css  compilation  less  css-calc 
— 닉 밥콕
소스
9
덜 공격적인 컴파일러를 원하지 않습니까?
— fiatjaf
컴파일러가 더 공격적이기를 원합니다. (이전의 코멘트에 이중 부정은 저를 혼동)) (그래서 내 투표 아니라 좋은 기능 아래)에 관해서는
— 안드레아스 디트리히

답변:

530

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

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

이 작업을 수행:

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

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

— 루크 페이지
소스
2
트위터의 리 세스로 덜 컴파일 하면이 탈출을 무시합니다 . 적어도이 의견을 쓸 때.
— Attila Fulop
1
calc(100% - 50px)less.css 1.4.0에서 방금 시도한 결과는 다음과 같습니다 calc(50%). 굉장한 ~"..."트릭은 계속 작동하지만 "out-of-the-box"문에 혼동되어 위의 방법이 효과적이라고 생각합니다. 누가, calc1.4.0 미만의 변화를 어떻게 지원 합니까? 감사!
— Brian M. Hunt
2
문제는 less.js가 처음에 이것을 계산하려고 시도한 이유입니다. 합리적인 답변을 계산할 수 없으므로 "100 %-250px"에 오류가 발생합니다.
— mpen
72
미래의 독자를 위해 연산자 만 이스케이프하여 변수를 사용할 수도 있습니다. 예 :calc(@somePercent ~"-" @someLength)
— 0b10011
10
이것을 잘못 계산하거나 오류를 던지는 대신 사용자가 무엇을하려고하고 그것을 내버려두고 있는지 깨닫지 못하는 이유는 무엇입니까? 분명히 백분율과 픽셀 값을 더 적게 함께 계산할 수는 없습니다.
— dfmiller
37

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

다음과 같이 할 수 있습니다.

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
— 세바스티안 로버
소스
— 또 다른
28

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

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }
— icl7126
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.