Отключить меньше-CSS перезапись calc () [дубликат]

этот вопрос уже есть ответ здесь:

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

width: calc(100% - 200px);

однако, когда меньше компилирует он выводит это:

width: calc(-100%);

есть ли способ сказать меньше, чтобы не компилировать его таким образом и выводить его нормально?

5 396
css css3 less.js css-calc

5 ответов:

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

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

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

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

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

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

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

735

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

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

width: calc(100% - 200px);

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

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

font-size: 12px + 2px;

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

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

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

60

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

23

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

@some-variable-height: 10px;

...

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

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

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

решения Фабрицио работает просто отлично.

очень распространенным вариантом использования 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);

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

.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);
}
6