LESS-CSS 덮어 쓰기 calc () 비활성화

LESS-CSS 덮어 쓰기 calc () 비활성화

---

이 질문에는 이미 답변이 있습니다.

• CSS3 calc 4 답변 으로 덜 공격적인 컴파일

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

width: calc(100% - 200px);

그러나 LESS 컴파일시 다음을 출력합니다.

width: calc(-100%);

LESS에게 컴파일하지 말고 정상적으로 출력하도록 지시하는 방법이 있습니까?

---

사용 탈출 문자열 (일명 탈출 값) :

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

---

또한 적은 수학을 이스케이프 된 문자열과 혼합 해야하는 경우 :

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

컴파일 :

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

Less는 기본적으로 공백으로 값 (이스케이프 된 문자열 및 수학 결과)을 연결합니다.

---

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

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

width: calc(100% - 200px);

엄격한 수학 옵션을 활성화하면 예상대로 작동합니다.

그러나 Strict Math는 내부뿐만 아니라 전체적으로 적용됩니다 calc(). 즉, 다음과 같은 경우

font-size: 12px + 2px;

수학은 더 이상 Less에 의해 처리되지 않을 것입니다. font-size: 12px + 2px이는 분명히 유효하지 않은 CSS입니다. Less (이전의 불필요한) 괄호로 처리해야하는 모든 수학을 래핑해야합니다.

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의 솔루션은 잘 작동합니다.

calc의 일반적인 사용 사례는 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