Менее агрессивная компиляция с CSS3 calc
меньше компиляторов, которые я использую (OrangeBits и dotless 1.3.0.5) агрессивно перевода
body { width: calc(100% - 250px - 1.5em); }
на
body { width: calc(-151.5%); }
что явно не нужные. Мне интересно, есть ли способ сигнализировать меньшему компилятору, чтобы по существу игнорировать атрибут во время компиляции. Я просмотрел меньшую документацию и документацию обоих компиляторов, и я ничего не смог найти.
делает меньше или a Меньше компилятор поддерживает это?
Если нет, есть ли расширитель CSS, который делает?
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 имели эту опцию по умолчанию. Версии она отключена по умолчанию.
очень распространенным использованием calc является 100% ширина и добавление некоторого поля вокруг элемента.
можно сделать так:
@someMarginVariable = 15px;
margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
существует несколько вариантов экранирования с тем же результатом:
body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }
Я знаю, что это старый, но есть более аккуратный способ включить переменные внутри сбежавшего calc, как объяснено в этом посте:https://github.com/less/less.js/issues/974
@variable: 2em;
body{ width: calc(~"100% - @{variable} * 2");}
используя фигурные скобки, вам не нужно закрывать и снова открывать экранирующие кавычки.