Less.js: Consultas de mídia: parênteses necessários mesmo sem --strict-math = on

ah, um caso extremo ... forçamos matemática estrita nas consultas de mídia para que as pessoas possam usar frações, obrigado por levantar o problema.

: +1: Também vendo isso em menos 2.5.1. A solução alternativa sugerida de colocar parênteses em torno da variável na consulta de mídia 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 caso de problema trivial (inválido):

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

Caso de problema trivial com solução 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 caso de problema trivial com solução alternativa:

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

Também somos afetados por isso no Moodle, pois esse problema afeta a versão 2.3 do bootstrap.

Neste caso, a variável é atribuída (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;

A consulta de mídia é (https://github.com/twbs/bootstrap/blob/v2.3.2/less/responsive-navbar.less#L181):

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

Isso leva a uma saída de:

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

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

Eu tentei fazer algo como

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

para evitar a criação da variável extra less, mas isso não funciona, alguma ideia por quê?

para evitar a criação da variável extra less, mas isso não funciona, alguma ideia por quê?

Atualmente, os parênteses são necessários para expressões aritméticas em instruções @media , por exemplo:

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

Recebo um erro 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;
  }
} 

Erro ao carregar "app / styles / index.less! $ Less" de "app / app" em http: // localhost: 63342 / foo / app / app.js Esperado ')' "

Recebo um erro para

Você está misturando <strong i="7">@sm</strong> -1 e <strong i="9">@sm</strong> - 1 (o primeiro não é uma expressão aritmética, mas uma lista de dois valores).