В Меньше компиляторы, я использую ( OrangeBits и Dotless 1.3.0.5 ) агрессивно перевод
body { width: calc(100% - 250px - 1.5em); }
в
body { width: calc(-151.5%); }
Что явно не желательно. Мне интересно, есть ли способ дать сигнал компилятору Less, чтобы он по существу игнорировал атрибут во время компиляции. Я искал документацию Less и документацию обоих компиляторов и ничего не смог найти.
Поддерживает ли компилятор Less или Less это?
Если нет, есть ли расширение CSS, которое делает?
css
compilation
less
css-calc
Ник Бэбкок
источник
источник
Ответы:
Less больше не оценивает выражение внутри
calc
по умолчанию, так какv3.00
.Оригинальный ответ (
Less v1.x...2.x
):Сделай это:
В Less 1.4.0 у нас будет
strictMaths
опция, которая требует, чтобы все вычисления Less были в скобках, поэтому ониcalc
будут работать «из коробки». Это вариант, так как это серьезное изменение. В ранних бета-версиях 1.4.0 эта опция была включена по умолчанию. Релиз версия отключена по умолчанию.источник
calc(100% - 50px)
в less.css 1.4.0, и результат былcalc(50%)
. Удивительный~"..."
трюк продолжает работать, но меня смущает утверждение «из коробки», которое заставляет меня думать, что вышесказанное сработает. Люк, как поддержкаcalc
изменений в Less 1.4.0? Спасибо!calc(@somePercent ~"-" @someLength)
Очень распространенный вариант использования calc - взять ширину 100% и добавить немного поля вокруг элемента.
Это можно сделать с помощью:
источник
-o-calc-
пока не поддерживается .Есть несколько вариантов выхода с одинаковым результатом:
источник
Существует более удобный способ включения переменных в экранированный calc, как объясняется в этом посте: функция CSS3 calc () не работает с Less # 974
Используя фигурные скобки, вам не нужно закрывать и открывать экранирующие кавычки.
источник