Отключить LESS-CSS Overwriting calc()

Сейчас я пытаюсь сделать это в CSS3 в моем коде LESS:

width: calc(100% - 200px);

Однако, когда компиляция LESS выводит это:

width: calc(-100%);

Есть ли способ сообщить LESS не компилировать его таким образом и нормально выводить его?

Ответ 1

С помощью экранированная строка (значение экранированного a.k.a.):

width: ~"calc(100% - 200px)";

Кроме того, если вам нужно смешать Less math с экранированными строками:

width: calc(~"100% - 15rem +" (10px+5px) ~"+ 2em");

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

width: calc(100% - 15rem + 15px + 2em);

Это работает как меньше объединяет значения (экранированные строки и результат математики) с пробелом по умолчанию.

Ответ 2

Помимо использования 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 - отличный вариант для рассмотрения при запуске нового проекта, иначе вам, возможно, придется переписать хорошую часть базы кода. Для наиболее распространенных случаев использования подход с экранированной строкой, описанный в другом ответе, более подходит.

Ответ 3

Здесь кросс-браузер меньше 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

Ответ 4

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

@some-variable-height: 10px;

...

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

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

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

Ответ 5

Решения 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: (@[email protected])*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}