Отключить LESS-CSS Overwriting calc () [дубликаты]

Помимо использования escape-значения, описанного в моем другом ответе, также можно исправить эту проблему, включив Strict Math.

При строгой математике будут обработаны только математические данные, которые находятся внутри ненужных круглых скобок, поэтому ваш код:

width: calc(100% - 200px);

Работает так, как ожидалось, при включенной строгой математике.

Однако, обратите внимание, что Strict Math применяется глобально, а не только внутри calc(). Это означает, что если у вас есть:

font-size: 12px + 2px;

Математика больше не будет обрабатываться Less - она ​​выведет font-size: 12px + 2px, что, очевидно, недействительно CSS. Вам придется обернуть все математические данные, которые должны обрабатываться с помощью скобок "Меньше" (ранее ненужных):

font-size: (12px + 2px);

Strict Math - отличный вариант для рассмотрения при запуске нового проекта, иначе вам, возможно, придется переписать хорошую часть базы кода. Для наиболее распространенных случаев использования подход с экранированной строкой, описанный в другом ответе, более подходит.

Здесь кросс-браузер меньше mixin для использования CSS calc с любым свойством:

.calc(@prop; @val) {
  @{prop}: calc(~'@{val}');
  @{prop}: -moz-calc(~'@{val}');
  @{prop}: -webkit-calc(~'@{val}');
  @{prop}: -o-calc(~'@{val}');
}

Пример использования:

.calc(width; "100% - 200px");

И CSS, которые выводят:

width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: -o-calc(100% - 200px);

Кодек в этом примере: http://codepen.io/patrickberkeley/pen/zobdp

Пример для экранированной строки с переменной:

@some-variable-height: 10px;

...

div {
    height: ~"calc(100vh - "@some-variable-height~")";
}

компилируется в

div {
    height: calc(100vh - 10px );
}

Решения Fabricio прекрасно работают.

Очень распространенная функция вычисления calc добавляет 100% ширину и добавляет некоторый запас вокруг элемента.

Можно сделать это с помощью

@someMarginVariable: 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);

Или можно использовать mixin как:

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}