Обычная процедура, использующая меньше

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

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

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

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

Ответы

Ответ 1

Escape значение:

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

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

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);

Ответ 2

Если вы хотите выполнять вычисления в выражении LESS (кроме фактического css calc), вы можете быстро получить себе большой нечитаемый беспорядок следующим образом:

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

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

 left: calc( 7.5vw );

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

Поэтому более простой способ чтения состоит в том, чтобы просто создать промежуточную переменную:

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

Результат:

left: calc(7.5vw);