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

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

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

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

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

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

Если нет, существует ли расширитель CSS?

Ответ 1

сделайте это..

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

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

Ответ 2

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

Можно сделать это с помощью

@someMarginVariable = 15px;

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

Ответ 3

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

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