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

336

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

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

в

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

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

Поддерживает ли компилятор Less или Less это?

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

— Ник Бэбкок
источник

9

Вы уверены, что не хотите, чтобы компилятор был менее агрессивным?

— Пятница

Я очень уверен, что хочу, чтобы компилятор был более агрессивным! (двойное отрицание в предыдущем комментарии смутило меня;)) (так что мой голос также за симпатичную функцию ниже)

— Андреас Дитрих

530

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

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

Сделай это:

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

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

— Люк Пейдж
источник

2

Обратите внимание, что если вы компилируете меньше с перерывом в твиттере, он игнорирует это экранирование . По крайней мере, на момент написания этого комментария.

— Аттила Фулоп

1

Я только что попробовал calc(100% - 50px)в less.css 1.4.0, и результат был calc(50%). Удивительный ~"..."трюк продолжает работать, но меня смущает утверждение «из коробки», которое заставляет меня думать, что вышесказанное сработает. Люк, как поддержка calcизменений в Less 1.4.0? Спасибо!

— Брайан М. Хант

2

Вопрос в том, почему less.js пытался вычислить это в первую очередь? Он должен выдавать ошибку для «100% - 250px», так как не может вычислить разумный ответ.

— mpen

72

Для будущих читателей вы также можете избежать только оператора, что позволит вам также использовать переменные. Пример:calc(@somePercent ~"-" @someLength)

— 0b10011

10

Вместо того, чтобы меньше просчитывать это или выдавать ошибку, почему он не может понять, что пытается сделать пользователь, и оставить это в покое? Очевидно, что процент и значение пикселя не могут быть вычислены вместе за меньшее.

— dfmiller

37

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

Это можно сделать с помощью:

@someMarginVariable = 15px;

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

— Себастьян Лорбер
источник

-o-calc- пока не поддерживается .

— еще

28

Есть несколько вариантов выхода с одинаковым результатом:

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

— icl7126
источник

9

Существует более удобный способ включения переменных в экранированный calc, как объясняется в этом посте: функция CSS3 calc () не работает с Less # 974

@variable: 2em;

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

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

— brohr
источник