working - webpack css calc




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

На этот вопрос уже есть ответ:

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

width: calc(100% - 200px);

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

width: calc(-100%);

Есть ли способ рассказать МЕНЬШЕ не компилировать его таким образом и выводить его нормально?


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

.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


Использование escape-строки (также выведенное значение):

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

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

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

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

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

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


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

@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: (@[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);
}




css-calc