Less.js: Medienabfragen: Klammern auch ohne --strict-math=on erforderlich

ah, ein kleiner Randfall.. wir erzwingen strenge Mathematik in Medienabfragen, damit die Leute Brüche verwenden können.

:+1: Sehen Sie dies auch auf weniger 2.5.1. Die vorgeschlagene Problemumgehung, die Variable in der Medienabfrage in Klammern zu setzen, funktioniert.

Trivialer Problemfall:

<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;
  }
}

Kompiliertes CSS des trivialen Problemfalls (ungültig):

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

Trivialer Problemfall mit Workaround:

<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;
  }
}

Kompiliertes CSS eines trivialen Problemfalls mit Workaround:

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

Wir sind auch in Moodle davon betroffen, da dieses Problem die Standardversion 2.3 von Bootstrap betrifft.

In diesem Fall wird die Variable zugewiesen (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;

Die Medienabfrage lautet (https://github.com/twbs/bootstrap/blob/v2.3.2/less/responsive-navbar.less#L181):

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

Dies führt zu einer Ausgabe von:

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

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

Ich habe versucht, etwas zu tun wie

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

um zu vermeiden, die zusätzliche weniger Variable zu erstellen, aber das funktioniert nicht, irgendwelche Ideen warum?

um zu vermeiden, die zusätzliche weniger Variable zu erstellen, aber das funktioniert nicht, irgendwelche Ideen warum?

Derzeit werden Klammern für arithmetische Ausdrücke in @media Anweisungen benötigt, zB:

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

Ich bekomme eine Fehlermeldung für

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

Fehler beim Laden von "app/styles/index.less!$less" von "app/app" unter http://localhost:63342/foo/app/app.js Erwartet ')'"

Ich bekomme eine Fehlermeldung für

Sie verwechseln <strong i="7">@sm</strong> -1 und <strong i="9">@sm</strong> - 1 (der erste ist kein arithmetischer Ausdruck, sondern eine Liste mit zwei Werten).