Less.js: 미디어 쿼리 : --strict-math = on 없이도 필요한 괄호

아, 약간의 엣지 케이스 .. 문제를 제기 해 주셔서 감사합니다.

: +1 : 2.5.1 이하에서도 이것을 본다. 미디어 쿼리에서 변수를 괄호로 묶는 제안 된 해결 방법이 작동합니다.

사소한 문제 사례 :

<strong i="7">@foo</strong>: 10px;
<strong i="8">@bar</strong>: 20px;
<strong i="9">@baz</strong>: <strong i="10">@foo</strong> + @bar;

.test {
  <strong i="11">@media</strong> (min-width: @baz) {
    color: red;
  }
}

사소한 문제 사례의 컴파일 된 CSS (잘못된) :

<strong i="15">@media</strong> (min-width: 10px + 20px) {
  .test {
    color: red;
  }
}

해결 방법이있는 사소한 문제 사례 :

<strong i="19">@foo</strong>: 10px;
<strong i="20">@bar</strong>: 20px;
<strong i="21">@baz</strong>: <strong i="22">@foo</strong> + @bar;

.test {
  <strong i="23">@media</strong> (min-width: (@baz)) {
    color: red;
  }
}

해결 방법으로 사소한 문제 사례의 컴파일 된 CSS :

<strong i="27">@media</strong> (min-width: 30px) {
  .test {
    color: red;
  }
}

이 문제는 부트 스트랩의 재고 버전 2.3에 영향을 미치기 때문에 무들에서도 영향을받습니다.

이 경우 변수가 할당됩니다 (https://github.com/twbs/bootstrap/blob/v2.3.2/less/variables.less#L181).

<strong i="7">@navbarCollapseWidth</strong>:             979px;
<strong i="8">@navbarCollapseDesktopWidth</strong>:      <strong i="9">@navbarCollapseWidth</strong> + 1;

미디어 쿼리는 (https://github.com/twbs/bootstrap/blob/v2.3.2/less/responsive-navbar.less#L181)입니다.

<strong i="13">@media</strong> (min-width: @navbarCollapseDesktopWidth) {
}

결과는 다음과 같습니다.

<strong i="17">@media</strong> (min-width: 979px + 1) {
}

https://tracker.moodle.org/browse/MDL-53152

나는 같은 것을 시도했다

<strong i="6">@media</strong> (min-width: <strong i="7">@navbarCollapseWidth</strong> + 1) { }

여분의 변수를 생성하는 것을 피하기 위해 이것은 작동하지 않습니다. 이유는 무엇입니까?

여분의 변수를 생성하는 것을 피하기 위해 이것은 작동하지 않습니다. 이유는 무엇입니까?

현재 @media 문에서 산술 표현식에는 괄호가 필요합니다. 예 :

<strong i="9">@media</strong> (min-width: (<strong i="10">@navbarCollapseWidth</strong> + 1)) { }

에 대한 오류가 발생합니다.

<strong i="6">@media</strong> (max-width: (<strong i="7">@sm</strong> -1)) {
  .hidden-sm-down{  // hide anything up to small size
    display: none;
  }
} 

http : // localhost : 63342 / foo / app / app.js의 "app / app"에서 "app / styles / index.less! $ less"를로드하는 중 오류가 발생했습니다. ')'가 예상됩니다. "

에 대한 오류가 발생합니다.

당신은 <strong i="7">@sm</strong> -1 와 <strong i="9">@sm</strong> - 1 (첫 번째 것은 산술식이 아니라 두 값 목록입니다).