Есть ли способ использовать процедуру css calc(), используя меньше?
Если я перейду к http://less2css.org/, и я наберу следующий вход (который является обычным правилом css):
width: calc(100% - 450px);
Выход должен быть точно таким же (потому что он правильный css), однако
вывод css, который производит меньше компилятора, width: calc(-350%);
Есть ли способ заставить это работать?
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);
Если вы хотите выполнять вычисления в выражении 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);