Менее агрессивная компиляция с CSS3 calc

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

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

на

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

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

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

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

302
compilation css css-calc css3 less

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