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

Мы также затронули это в Moodle, поскольку эта проблема затрагивает стандартную версию загрузчика 2.3.

В этом случае назначается переменная (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;
  }
} 

Ошибка при загрузке "app / styles / index.less! $ Less" из "app / app" по адресу http: // localhost: 63342 / foo / app / app.js Expected ')' "

Я получаю сообщение об ошибке

Вы смешиваете <strong i="7">@sm</strong> -1 и <strong i="9">@sm</strong> - 1 (первое - это не арифметическое выражение, а список из двух значений).