Процедура calc с использованием less [дубликат]

этот вопрос уже есть ответ здесь:

есть ли способ использовать процедуру css calc (), используя меньше?

Если я пойду в http://less2css.org/ и я набираю следующий ввод (который является обычным css правило):

width: calc(100% - 450px);

вывод должен быть точно таким же (потому что это обычный css), однако,

вывод css, который производит меньший компилятор, -width: calc(-350%);

есть ли способ заставить это работать?

10
css css-calc css3 less

2 ответов

побег значение:

width: ~"calc(100% - 450px)";

экранирование не требуется менее 1.4, потому что вычисления выполняются только тогда, когда расчет окружен круглыми скобками. Например:

prop: 20 + 10px;    ->  prop: 20 + 10px;
prop: (2 + 10px);   ->  prop: 12px;
prop: func(1 + 2);  ->  prop: func(1 + 2);
prop: func((1 + 2));->  prop: func(3);
17

если вы хотите делать вычисления в меньшем выражении (кроме фактического CSS calc) , вы можете быстро попасть в большой нечитаемый беспорядок, как это:

 @width: 85;
 left: ~'calc('((100vw - @width) / 2)~')';

в результате :

 left: calc( 7.5vw );

Я не мог найти способ сделать это без пробелов добавить.

таким образом, проще читать метод, чтобы просто создать промежуточную переменную:

 @left: ((100vw - @width) / 2);
 left: ~'calc(@{left})';

что приводит к :

left: calc(7.5vw);
1