较少的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';

如果您也在实际属性定义中指定单位，则始终可以避免最后两行和“像素内”间接。