Менее агрессивные компиляции с помощью CSS3 Calc в

чем меньше компиляторов я использую (OrangeBits и dotless 1.3.0.5) агрессивно перевода 

body { width: calc(100% - 250px - 1.5em); }

на

body { width: calc(-151.5%); }

что, очевидно, не желательно. Мне интересно, есть ли способ сигнализировать компилятору Less, чтобы по существу игнорировать атрибут во время компиляции. Я просмотрел меньше документации и документацию обоих компиляторов, и я ничего не смог найти.

не менее или Меньше компилятор поддерживает это?

Если нет, есть ли расширитель CSS, который делает?

4 302
css css3 compilation less.js css-calc

4 ответа:

Less больше не оценивает выражение внутри calc по умолчанию, начиная с v3.00.

оригинальный ответ (Less v1.x...2.x):

этого:

body { width: calc(~"100% - 250px - 1.5em"); }

в менее 1.4.0 мы будем иметь strictMaths опция, которая требует все меньше вычислений, чтобы быть в скобках, так что calc будет работать "из коробки". Это вариант, так как это серьезное изменение. Ранние бета-версии 1.4.0 имели эту опцию по по умолчанию. Версии она отключена по умолчанию.

484

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

можно сделать так:

@someMarginVariable = 15px;

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

существует несколько вариантов экранирования с одинаковым результатом:

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }
25

Я знаю, что это старый, но есть более аккуратный способ включить переменные внутри экранированного calc, как описано в этом посте:https://github.com/less/less.js/issues/974

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

С помощью фигурных скобок вам не нужно закрывать и снова открывать экранирующие кавычки.

6