Less.js: CSS3 calc() 함수는 LESS에서 작동하지 않습니다

에 만든 2012년 10월 08일 · 51코멘트 · 출처: less/less.js

이미 보고된 것으로 알고 있지만 정보가 부족하여 버그가 닫혔습니다.

다음 CSS 코드가 있습니다.

#id1 {
    position: fixed;
    left: 0; top: 0;
    width: 130px;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - 130px);
}

130px 를 매개변수로 사용하여 LESS로 변환하고 싶었지만 calc는 LESS에 의해 해석되며 다음과 같습니다.

<strong i="11">@id1width</strong>: 130px
#id1 {
    position: fixed;
    left: 0; top: 0;
    width: @id1width;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - @id1width);
}

마지막 한 줄을 width: calc(-30%); 변환하여 분명히 원하는 것이 아닙니다. width: ~"calc(100% - @id1width)"; 사용해 보았지만 @id1width 가 해석되지 않습니다.

LESS는 CSS3가 내부용으로 예약한 것을 사용해서는 안 된다고 생각합니다...

출처

mgol

👍13 ❤2 😄2

가장 유용한 댓글

그들은 아마도 중복으로 닫혔을 것입니다. calc에 대해서는 찾을 수 없지만 # 146 #122 및 #915를 참조하십시오.

해결 방법: width: ~"calc(100% - @{id1width})"; - 변수 주위에 중괄호를 주목하십시오.

우리는 이 문제를 해결하기 위해 대괄호 안에 있는 것만 평가하는 시스템으로 이동하고 있습니다.

lukeapage 에 2012년 10월 08일

👍51 🎉11 ❤6 😄5

모든 51 댓글

그들은 아마도 중복으로 닫혔을 것입니다. calc에 대해서는 찾을 수 없지만 # 146 #122 및 #915를 참조하십시오.

해결 방법: width: ~"calc(100% - @{id1width})"; - 변수 주위에 중괄호를 주목하십시오.

우리는 이 문제를 해결하기 위해 대괄호 안에 있는 것만 평가하는 시스템으로 이동하고 있습니다.

lukeapage 에 2012년 10월 08일

👍51 🎉11 ❤6 😄5

:+1:

shankarcabus 에 2012년 12월 18일

<strong i="5">@rows</strong>: 10;

<strong i="6">@row1</strong>: 1 / <strong i="7">@rows</strong> * 100%;

.featured1
{
  top: ~'-webkit-calc(@{row1} + 20px)';
  right: 0;
  bottom: @row5;
  left: @col9;
}

이 LESS 비트는 ' @row1 ' 값을 10%로 처리합니다. 그러나 LESS의 이스케이프된 섹션 안에 있고 LESS 변수를 유지하기 위해 곱슬곱슬하게 래핑되면 '%' 없이 '10'을 반환합니다.

아직 실패하지 않은 해결 방법을 찾았습니다. 이스케이프된 코드 내에서 'row1' 변수의 닫는 중괄호 뒤에 다른 '%'를 배치하면 올바르게 작동합니다...

~'-webkit-calc(@{row1}% + 20px)';

그러나 이미 변수에 있다고 가정하는 다른 단위 유형을 추가하는 것은 꽤 해킹처럼 보입니다.

jonjohnjohnson 에 2012년 12월 19일

@jonjohnjohnson 이것은 머리에 고정되어 있으며 1.3.2에 포함될 것입니다.

이 버그의 나머지 부분은 1.4.0에서 해결될 것입니다.

lukeapage 에 2012년 12월 19일

이것이 같은 문제인지 확실하지 않지만 다음과 같은 문제가 있습니다. 여기에 덜 구체적인 내용이 없으며 1.3.3 미만이 유효한 CSS를 뭉개고 있습니다.

CSS는 다음과 같습니다.

html, body {
    margin:0, padding:0, border:0;
    height: 100%;
}

#content {
    height: -webkit-calc(100% - 40px);
    height: calc(100% - 40px);
    background-color:gray;
}

#footer {
    background-color:black;
}

여기에 포함할 HTML이 있습니다.

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet/less" type="text/css" href="test.css" />
<script src="less-1.3.3.min.js"></script>
<body>
<div id="content"></div>
<div id="footer" style="height:40px"></div>
</body>
</html>

"콘텐츠"가 60%의 높이로 설정되어 있으므로 브라우저에 변경 없이 전달하는 대신 계산식을 구문 분석하고 잘못 해석하는 경우가 적습니다. Safari 6.0.2 및 Firefox에서 테스트되었습니다.

faceless2 에 2013년 01월 14일

1.4.0의 마스터에서 수정됨

lukeapage 에 2013년 02월 02일

height: ~"calc(100% - 50px)";

여전히 생산:

height: calc(50%);

나를위한. 원해요:

height: calc(100% - 50px);

OliverJAsh 에 2014년 06월 03일

게다가 엄격한 수학이 on 설정된 경우에도 여전히 height: calc(50%); 생성합니다.

OliverJAsh 에 2014년 06월 03일

@OliverJAsh Less 1.7.0에서는 결과를 재현할 수 없습니다(이스케이프된 값과 --strict-math:on 예상대로 작동함)... 사용하는 컴파일러/환경/스크립트에 대한 자세한 정보를 제공해 주시겠습니까? (부트스트랩 빌드 스크립트 문제가 이러한 잘못된 결과를 초래할 수 있는 경우를 대비하여: https://github.com/twbs/bootstrap/issues/13604, 아마도 이것이 귀하의 경우이기도 합니까?).

seven-phases-max 에 2014년 06월 03일

1.6.3에서 이 문제가 발생했습니다(어떤 이유로 WinLESS는 1.7.x로 업그레이드할 때 컴파일에 방해가 되므로 지금은 1.6.x를 고수하고 있습니다)

내 빠른 수정은 다음과 같은 방정식의 한 부분을 탈출하는 것이 었습니다.

height: calc(~"100%" - unit(<strong i="7">@var</strong>, px));

이것은 <strong i="10">@var</strong>: 50 와 같은 변수에서도 작동합니다. 또는 calc(~"100% - 50px"); 와 같은 전체 계산을 피할 수 있습니다.

twiginteractive 에 2014년 07월 26일

👍5

@twiginteractive --strict-math 옵션 off (기본 설정)으로 이스케이프를 사용해야 하는 경우 문제가 아니라 예상되는 동작입니다. --strict-math 참조하십시오.

seven-phases-max 에 2014년 07월 26일

👍1

@seven-phases-max 흠 - 문서에 따르면 SM이 꺼져 있으면(기본값) 이 _should_가 올바르게 구문 분석됩니다(즉, 수정되지 않음).
height: calc(100% - 10px);

하지만 그렇지 않습니다. 출력 CSS는 원하는 결과가 아닌 height: calc(90%); 입니다. 아마도 이것은 1.7에서 수정되었지만 내가 말했듯이 WinLESS 컴파일을 깨뜨리는 것이 무엇인지 알아낼 때까지 지금은 그 버전을 사용할 수 없습니다.

("정확하게 처리될 것"이라고 되어 있을 때 문서를 잘못 읽지 않는 한... LESS는 100%의 값을 알 수 없으므로 '100% - 10px'에서 수학적 계산을 해서는 안 됩니다.)

twiginteractive 에 2014년 07월 26일

@twiginteractive

문서에 따르면 SM이 꺼져 있으면(기본값) 올바르게 구문 분석되어야 합니다(즉, 변경되지 않음).

아니요, 거기에 있는 단어는 currently 아니라 correctly (즉, "현재 _처리됩니다_").

seven-phases-max 에 2014년 07월 26일

@seven-phases-max 아 - 맙소사, 이제 이해가 됩니다. 설명해주셔서 감사합니다.

twiginteractive 에 2014년 07월 27일

높이: ~"계산(100% - 50px)"; 나를 위해 일했다.

aamirshahzad 에 2014년 09월 05일

👍18 🎉5

~~여기서 Less.js가 코드를 엉망으로 만들기 시작합니다.~~

height: _calc(50%);
height: calc(100% - 50%); /* browser-native */

stevenvachon 에 2014년 09월 05일

@stevenvachon

아마도 v2.0에는 다음과 같이 기능에 접두사를 붙일 수 있는 옵션이 있을 것입니다.

이것은 어떤 식으로든 calc 에 영향을 미치지 않습니다. 내장된 calc 함수가 없으며 Less는 (Less의) 규칙에 따라 수학 표현식을 평가할 뿐입니다. 그게 다야 이 "혼란"을 원하지 않으면 --strict-math .

seven-phases-max 에 2014년 09월 05일

P 이 문제에 대한 해결책은 엄격한 수학입니다. 그리고 아마도 우리는
calc를 호출할 때 엄격한 수학을 사용하도록 하시겠습니까?

lukeapage 에 2014년 09월 05일

~~문제는 Less 이후에 Myth를 사용할 때 확장됩니다.~~

stevenvachon 에 2014년 09월 05일

왜요? 신화는 괄호를 제거합니까? 엄격한 수학은 적절한 상위 집합을 덜 만듭니다.
CSS의.

lukeapage 에 2014년 09월 05일

그리고 calc를 호출할 때 엄격한 수학을 적용해야 할까요?

우리는 이것을 #1872에서 논의했고 "local strict- math:on " 해결 방법

seven-phases-max 에 2014년 09월 05일

@stevenvachon

strictMath를 사용하더라도 Less가 무시하도록 ~"calc(...)"해야 합니다.

예시? 즉, Less 가 calc 내부의 표현식을 --strict-math=on 고정하는 스니펫입니다.

seven-phases-max 에 2014년 09월 05일

v2 접두사는 언제부터 작동합니까? 우리가 그것을 결정하고 내가 잊었나요?

lukeapage 에 2014년 09월 06일

v2 접두사는 언제부터 작동합니까? 우리가 그것을 결정하고 내가 잊었나요?

아니요. https://github.com/less/less.js/issues/2102#issuecomment -50286985를 약간 과대평가한 것 같습니다.

seven-phases-max 에 2014년 09월 06일

네, 죄송합니다. "옵션"이 아니라 "옵션을 제공하는 플러그인 작성 기능"입니다. ~~~"" 에 calc() ~"" 가 있거나 없는 일부 코드를 다시 테스트해야 합니다.~~ 조금 전에 착각을 하고 그런 오해를 하며 계속 나아가고 있었을 텐데. 지금 수정해야 할 오래된 코드가 있습니다.

stevenvachon 에 2014년 09월 06일

width 와 함께 사용할 때 calc 이상한 일이 발생하는 것을 발견했습니다. 더 쉽게 만들기 위해 모든 것을 codepen에 넣었습니다. http://codepen.io/anon/pen/OVpJvP

alenb 에 2015년 06월 02일

@alenb

그럼 거기에 이상한 점은 무엇입니까? codepen의 코드가 예상대로 컴파일됩니다...

seven-phases-max 에 2015년 06월 02일

@seven-phases-max

컴파일되었지만 예상한 것과 다릅니다. CSS 코드를 좀 더 자세히 확인하세요.

3개의 열로 완전히 늘어나야 하지만 맨 오른쪽에 여전히 간격이 있기 때문에 이상합니다. 처음 두 열은 33.33%에서 20px를 뺀 값이어야 하며 마지막 열은 33.33%여야 합니다. 처음 2개 열의 오른쪽 여백은 20px이지만 맨 오른쪽에 분명히 간격이 있으므로 반영되지 않습니다.

나는 지난 밤에 더 많은 것을 가지고 놀았고 padding-right 대신 margin-right가 트릭을 수행하고 문제를 해결합니다.

alenb 에 2015년 06월 03일

@alenb

컴파일되었지만 예상한 것과 다릅니다. CSS 코드를 좀 더 자세히 확인하세요.

물론이죠. 따라서 다른 것을 기대하는 경우 지정하십시오.

처음 2개의 열에는 20px의 패딩 오른쪽이 있지만 이는 반영되지 않습니다.

padding 는 너비에 어떤 영향도 미치지 않습니다(특정 [ box-sizing ](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)을 설정하지 않는 한 )), consult [CSS specs](http://www.w3.org/TR/REC-CSS2/box.html). So you simply get : (33% - 20px) + (33% - 20px) + 33% = 99% - 40px -> 40px` 간격은 예상대로입니다.

어느 쪽이든 이것은 CSS에만 관련되며 Less가 calc 컴파일하는 방법과 관련이 없습니다. codepen 코드에서 "컴파일된 보기" 버튼을 클릭하면 calc 문이 사용자가 지정한 것과 정확히 일치하도록 Less에서 컴파일된 것을 볼 수 있습니다.

seven-phases-max 에 2015년 06월 03일

@seven-phases-max

나는 codepen이 이것을 분명히 할 것이라고 생각했지만 전혀 문제가되지 않았습니다.

정보에 대해서 감사드립니다!

alenb 에 2015년 06월 03일

오늘날에도 less의 기본 설치(npm 사용)에서는 여전히 작동하지 않습니다.

나는 사용해야했다 :
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);

버그가 "닫힘"으로 표시되어 정상인지는 모르겠지만 알려드리고자 합니다.

rkyoku 에 2016년 04월 08일

👍1

@RenaudParis --strict-math

seven-phases-max 에 2016년 04월 08일

알겠습니다. 시도해 보겠습니다. 감사합니다! 하지만 다음과 같이 하는 것이 더 좋지 않을까요?
기본? 상당히 놀랍기 때문에 당신이 이것을 모를 때
매개변수.

어쨌든 감사합니다!

르 벤. 8 avr. 2016 à 20:48, Max Mikhailov [email protected] a
에크리트 :

@RenaudParis https://github.com/RenaudParis --strict-math
http://lesscss.org/usage/#command -line-usage-strict-math
—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/less/less.js/issues/974#issuecomment -207553212

rkyoku 에 2016년 04월 08일

하지만 기본적으로 제공되는 것이 더 좋지 않을까요?

기본값으로 만들면 기존의 많은 Less 코드 기반이 손상됩니다. 한 번(~ v1.4.0 ) 실제로 기본값으로 만들려는 시도가 있었지만 레거시 이전 버전과의 호환성으로 인해 취소되었습니다... #1880에서 보다 새롭고 덜 방해적인 방법이 개발되었습니다(하지만 아직 구현되지 않았습니다).

seven-phases-max 에 2016년 04월 09일

알겠습니다. 시간을 내어 설명해 주셔서 감사합니다. Max!

르 샘. 9시 2016년 13시 46분, Max Mikhailov [email protected] a
에크리트 :

하지만 다음과 같이 하는 것이 더 좋지 않을까요?
기본?
기본값으로 만들면 기존의 많은 Less 코드 기반이 손상됩니다. 한 번
(~v1.4.0에서) 실제로 기본값으로 만들려는 시도가 있었지만
그런 다음 레거시 이전 버전과의 호환성으로 인해 반대입니다. 더 새로운,
덜 방해가 되는 방법은 #1880에서 개발되었습니다.
https://github.com/less/less.js/issues/1880 (하지만 구현되지 않음
아직)).
—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/less/less.js/issues/974#issuecomment -207776654

rkyoku 에 2016년 04월 09일

나는 이것을 해결했다 :

.calc(<strong i="6">@prop</strong>, @val) {
    @{prop}: ~"calc(~'@{val}')";
    @{prop}: ~"-moz-calc(~'@{val}')";
    @{prop}: ~"-webkit-calc(~'@{val}')";
    @{prop}: ~"-o-calc(~'@{val}');"
}
.calc(width, "80% - 36px");

command line 하면 맞습니다. less-loader 올바르지 않습니다. 그래서 stackoverflow 에서 이 솔루션을 찾았습니다.

내 코드에 복사합니다. 슬프게도 정확하지 않습니다. 그래서 뭔가 수정했습니다. 효과가있다!

불행히도 명령줄 이 올바르지 않습니다!!😂 😂 😂

mqliutie 에 2016년 09월 01일

이 문제가 종료된 이유가 확실하지 않습니다. Less가 기본 CSS 동작을 변경한다는 것은 이치에 맞지 않습니다.

vincentmorneau 에 2016년 11월 03일

... Less는 기본 CSS 동작을 변경합니다.

그렇지 않을 것입니다. --strict-math=on 만 설정하면 됩니다( --strict-math=off 에 따라 달라지는 엄청난 양의 Less 프로젝트와의 호환성과 #1880에서 언급한 몇 가지 고려 사항으로 인해 기본적으로 활성화되지 않음).

seven-phases-max 에 2016년 11월 04일

👍1

UIkit 3 테마에서 my_theme.less 에서 이것을 사용하고 있습니다.

height: ~"calc(100vh - 20px)";

그리고 그것은 작동합니다.

oshihirii 에 2017년 08월 06일

👍4 😕1

*.less 파일 https://github.com/less/less.js/issues/974#issuecomment -9229470에 작성할 때 저에게 효과적이었습니다.

@lukeapage 감사합니다! 🥇

quytm2239 에 2017년 10월 16일

안녕하세요 @mqliutie calc에 대한 mixin 제안을 추가해 주셔서 감사합니다. 하지만 Mixin에 컴파일을 중단시키는 추가 ~가 있습니다.

믹스인은

.calc(<strong i="8">@prop</strong>, @val) {
    @{prop}: ~"-webkit-calc('@{val}')";
    @{prop}: ~"-moz-calc('@{val}')";
    @{prop}: ~"calc('@{val}')";
}

다음과 같이 입력하십시오.
.calc(폭, "100% - 60px");

다음과 같이 출력합니다.
너비: 계산(100% - 60px);

ciaranlp 에 2017년 10월 19일

이 문제가 닫힌 이유는 무엇입니까?! 고정되지 않았습니다.

calc(50% - 20px) 쓸 때 여전히 calc(30%) 받고 있습니다. 이것은 결코 아무나 원하는 것이 잘못 되었다는 사실을 제외 하고는 100% 신뢰도(예: 동일한 단위)로 계산할 수

이 문제를 다시 여십시오.

thany 에 2018년 01월 25일

👍1

@thany
이 주석을 참조하십시오. 수학 처리의 기본 설정이 역사의 부산물인 만큼 이것이 정확히 문제가 아닌 방법을 설명하고 기본 설정을 언제든지 변경할 수 있습니다.
https://github.com/less/less.js/issues/974#issuecomment -207553212
https://github.com/less/less.js/issues/974#issuecomment -207776654

jonjohnjohnson 에 2018년 01월 25일

@jonjohnjohnson 그것은 단지 문제를 다시 언급하는 것입니다. 엄격 모드에서 수정하면(아직 시도하지 않았으므로 버그를 해결하기 위해 모든 종류의 기본이 아닌 플래그를 활성화할 필요가 없어야 함) 기본적으로 켜져 있어야 합니다.

어떻게 표현하든 이 문제는 어떤 정의로도 해결되지 않습니다.

thany 에 2018년 01월 26일

@thany 저는 개발자가 문제가 아니라고 판단했음을 이해하는 데 도움을 주려고 한 것뿐입니다. 이러한 의견은 문제를 다시 설명하는 것이 아니라 문제에 대한 개발자의 입장을 설명합니다. 행운을 빕니다.

jonjohnjohnson 에 2018년 01월 26일

@thany

그러면 기본적으로 켜져 있어야 합니다.

이것은 즉시 수천 개의 프로젝트를 중단시킬 것이기 때문에 불가능합니다. 따라서 기본 동작을 문제로 취급하는 경우 문서화된 옵션을 설정하기만 하면 됩니다. 어떤 정의에 의해.

이 문제가 닫힌 이유는 무엇입니까?!

기본 동작을 개선하는 방법에 대한 최신 토론이 여기에 있기 때문입니다.

seven-phases-max 에 2018년 01월 26일

@thany @seven-phase-max로 이 문제를 해결하고 싶다면 #1880에 기여하세요. 해결책이 있다고 생각하지만 구현할 준비가 된 결정을 내리기에 충분한 커뮤니티 평가가 없었습니다. 긴 내용이지만 솔루션을 찾는 데 필요한 것입니다. 제안을 검토하고 어떤 식으로든 평가하는 것입니다. 그리고 나서: 구현할 작업을 맡을 사람.

matthew-dean 에 2018년 01월 27일

 width: 15%;
 height: ~"calc(width)";

높이 = 너비를 만드는 방법

xiaomizhou66 에 2018년 11월 18일

👍1

@xiaomizhou66
그것은 LESS나 이 문제와 아무 관련이 없습니다. 순전히 CSS 질문입니다. "css keep aspect"와 같은 것을 검색하면 몇 가지 답변을 찾을 수 있습니다.

thany 에 2018년 11월 26일

그래서 이것은 여전히 깨졌습니다. calc(100vh - 138px)는 -38px로 나옵니다.

willatathena 에 2019년 03월 15일

@윌라타테나

Less 3.x에서 이 문제가 발생하면 별도의 버그 보고서를 작성하십시오.
이전 Less 버전의 경우 이는 기본적으로 예상되는 동작입니다(위의 게시물에서 처리 방법을 확인하세요).

seven-phases-max 에 2019년 03월 16일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Less.js: CSS3 calc() 함수는 LESS에서 작동하지 않습니다

가장 유용한 댓글

모든 51 댓글

관련 문제