Меньше CSS вычислений

Question

Вот что я хотел бы сделать. Не уверен, что это возможно с LESS CSS , но у меня такое чувство, что я просто не могу найти синтаксис.

@height : 50px;
@wrap   : 25px;
@bgsize : ((@wrap/@height)*100)+'%';

Так что @bgsize == 50%, все, что я пробовал, приводило к сбою сценария.

Answer 1

На самом деле, более элегантный способ сделать это - просто использовать функцию percentage(), встроенную в LESS.

@height : 50px;
@wrap   : 25px;
@bgsize : percentage(@wrap/@height);
// @bgsize == 50%

Возможно, это было добавлено в более новой версии LESS.

Answer 2

AFAIK, результат выражения всегда будет использовать те же единицы, что и его операнды;добавление знака процента в конце даст в лучшем случае что-то вроде «50px%» или вообще не получится.

Тем не менее, вы можете сделать следующее (что не очень элегантно, но работает):

@height-in-pixels: 50;
@wrap-in-pixels: 25;
@bgsize: @wrap-in-pixels / @height-in-pixels * 100%;
@height: @height-in-pixels + 'px';
@wrap: @wrap-in-pixels + 'px';

Вы всегда можете избежать последних двух строк и косвенного обращения "-in-пикселов", если вы также указываете единицы измерения в действительном определении свойства.