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 に影響するため、Moodle でもこの影響を受けます。

この場合、変数が割り当てられます (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) { }

余分な less 変数の作成を避けるために、これは機能しません。なぜですか?

余分な less 変数の作成を避けるために、これは機能しません。なぜですか?

現在、 @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混同しています (最初のものは算術式ではなく、2 つの値のリストです)。