Используемые мною компиляторы Less (OrangeBits и dotless 1.3.0.5) агрессивно переводя
body { width: calc(100% - 250px - 1.5em); }
в
body { width: calc(-151.5%); }
Это, очевидно, нежелательно. Мне интересно, есть ли способ сообщить компилятору Less, чтобы по существу игнорировать атрибут во время компиляции. Я просмотрел документацию Less и документацию компиляторов, и я ничего не смог найти.
Поддерживает ли это меньше или меньше компилятор?
Если нет, существует ли расширитель CSS?
сделайте это..
body { width: calc(~"100% - 250px - 1.5em"); }
В less.js 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); }