LESS-CSS 덮어쓰기 calc() 사용 안 함

LESS-CSS 덮어쓰기 calc() 사용 안 함

이 질문에는 이미 다음과 같은 답변이 있습니다.

레스가 CSS calc() 속성을 컴파일하려고 시도하는 것을 방지하는 방법? (5개 답변)

닫힘6년 전에.

지금 저는 LESS 코드의 CSS3에서 이 작업을 수행하려고 합니다.

width: calc(100% - 200px);

그러나 LESS가 컴파일하면 다음을 출력합니다.

width: calc(-100%);

LESS에게 그런 식으로 컴파일하지 말고 정상적으로 출력하라고 하는 방법이 있습니까?

이스케이프된 문자열(일명 이스케이프 값) 사용:

width: ~"calc(100% - 200px)";

---

또한 탈출된 문자열에 Less math를 혼합해야 하는 경우:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

컴파일 대상:

width: calc(100% - 15rem + 15px + 2em);

이것은 기본적으로 Less concatenate 값(탈출된 문자열 및 수학 결과)과 공백을 연결하기 때문에 작동합니다.

다른 답변에서 설명한 이스케이프 값을 사용하는 것 외에도 엄격한 수학 설정을 활성화하여 이 문제를 해결할 수도 있습니다.

엄격한 수학을 사용하면 불필요한 괄호 안에 있는 수학만 처리되므로 코드는 다음과 같습니다.

width: calc(100% - 200px);

엄밀 연산 옵션이 활성화된 상태에서 예상대로 작동합니다.

그러나 Strict Math는 내부뿐만 아니라 전 세계적으로 적용된다는 점에 유의하십시오.calc(). 그 말은, 만일 당신이 다음을 가지고 있다면,

font-size: 12px + 2px;

연산이 더 이상 Less에 의해 처리되지 않습니다 -- 출력됩니다.font-size: 12px + 2px분명히 CSS가 무효인 겁니다Less in(이전에는 불필요했던) 괄호로 처리해야 하는 모든 수학을 랩핑해야 합니다.

font-size: (12px + 2px);

Strict Math는 새 프로젝트를 시작할 때 고려하는 좋은 옵션입니다. 그렇지 않으면 코드 베이스의 상당 부분을 다시 작성해야 할 수도 있습니다.가장 일반적인 사용 사례의 경우 다른 답변에 설명된 탈출 문자열 접근법이 더 적합합니다.

여기 CSS를 사용하기 위한 크로스 브라우저 레스 믹스인이 있습니다.calc모든 속성:

.calc(@prop; @val) {
  @{prop}: calc(~'@{val}');
  @{prop}: -moz-calc(~'@{val}');
  @{prop}: -webkit-calc(~'@{val}');
  @{prop}: -o-calc(~'@{val}');
}

사용 예시:

.calc(width; "100% - 200px");

그리고 출력되는 CSS:

width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);

이 예제의 코드 펜: http://codepen.io/patrickberkeley/pen/zobdp

변수가 있는 이스케이프 문자열의 예:

@some-variable-height: 10px;

...

div {
    height: ~"calc(100vh - "@some-variable-height~")";
}

에 모읍니다.

div {
    height: calc(100vh - 10px );
}

Fabricio의 솔루션은 잘 작동합니다.

계산의 매우 일반적인 사용 사례는 100% 너비를 추가하고 요소 주위에 여백을 추가하는 것입니다.

다음과 같은 작업을 수행할 수 있습니다.

@someMarginVariable: 15px;

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

또는 다음과 같은 믹스인을 사용할 수 있습니다.

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}

언급URL : https://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc