Less.js: Requêtes média : parenthèses nécessaires même sans --strict-math=on

ah, c'est un peu un cas limite .. nous forçons des mathématiques strictes dans les requêtes médiatiques afin que les gens puissent utiliser des fractions, merci d'avoir soulevé le problème.

:+1: Voir aussi ceci sur moins 2.5.1. La solution de contournement suggérée consistant à mettre des parenthèses autour de la variable dans la requête multimédia fonctionne.

Cas de problème trivial :

<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 compilé d'un cas de problème trivial (invalide) :

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

Cas de problème trivial avec solution de contournement :

<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 compilé d'un cas de problème trivial avec solution de contournement :

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

Nous sommes également affectés par cela dans Moodle car ce problème affecte la version stock 2.3 de bootstrap.

Dans ce cas, la variable est affectée (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;

La requête média est (https://github.com/twbs/bootstrap/blob/v2.3.2/less/responsive-navbar.less#L181) :

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

Cela conduit à une sortie de :

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

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

J'ai essayé de faire quelque chose comme

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

afin d'éviter de créer la variable supplémentaire less, mais cela ne fonctionne pas, des idées pourquoi?

afin d'éviter de créer la variable supplémentaire less, mais cela ne fonctionne pas, des idées pourquoi?

Actuellement, les parenthèses sont requises pour les expressions arithmétiques dans les instructions @media , par exemple :

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

j'obtiens une erreur pour

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

Erreur de chargement de "app/styles/index.less!$less" à partir de "app/app" sur http://localhost:63342/foo/app/app.js Attendu ')'"

j'obtiens une erreur pour

Vous mélangez <strong i="7">@sm</strong> -1 et <strong i="9">@sm</strong> - 1 (le premier n'est pas une expression arithmétique mais une liste à deux valeurs).