Less.js: Consultas de medios: se necesitan paréntesis incluso sin --strict-math = on

ah, un poco al margen ... forzamos la matemática estricta en las consultas de medios para que la gente pueda usar fracciones, gracias por plantear el problema.

: +1: También veo esto en menos 2.5.1. La solución alternativa sugerida de poner paréntesis alrededor de la variable en la consulta de medios funciona.

Caso de problema 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 compilado de un caso problemático trivial (no válido):

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

Caso de problema trivial con solución alternativa:

<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 compilado de un caso de problema trivial con solución alternativa:

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

También estamos afectados por esto en Moodle ya que este problema afecta a la versión estándar 2.3 de bootstrap.

En este caso se asigna la variable (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 consulta de medios es (https://github.com/twbs/bootstrap/blob/v2.3.2/less/responsive-navbar.less#L181):

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

Esto conduce a una salida de:

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

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

Intenté hacer algo como

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

para evitar crear menos variables adicionales, pero esto no funciona, ¿alguna idea de por qué?

para evitar crear menos variables adicionales, pero esto no funciona, ¿alguna idea de por qué?

Actualmente, los paréntesis son necesarios para las expresiones aritméticas en declaraciones @media , por ejemplo:

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

Me sale un error para

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

Error al cargar "app / styles / index.less! $ Less" desde "app / app" en http: // localhost: 63342 / foo / app / app.js Se esperaba ')' "

Me sale un error para

Estás mezclando <strong i="7">@sm</strong> -1 y <strong i="9">@sm</strong> - 1 (el primero no es una expresión aritmética sino una lista de dos valores).