使用数学函数获取整数值

Question

我有一些基本上看起来像这样的LessCSS:

.foo {
    @height: 20px;
    @iconHeight: 13px;

    background-position: 0 (@height - @iconHeight) / 2;
}

然而,这显然是background-position: 0 3.5px,并且我更喜欢它是一个整数(值Math.ceil),但是这不起作用:

background-position: 0 Math.ceil((@height - @iconHeight) / 2)

也没有使用javascript评估运算符:

background-position: 0 `Math.ceil((@height - @iconHeight) / 2)`

...因为这被解析为Math.ceil(20px - 13px)和"px"存在语法错误.

我甚至尝试过使用过 parseInt

0 `Math.ceil((parseInt('@{height}', 10) - parseInt('@{iconHeight}', 10)) / 2)`px

然而,结果如下:

background-position: 0 4 px

......这是不对的.最后,即使在JS评估中添加"px"也行不通

background-position: 0 `Math.ceil(....) + "px"`;
// becomes
background-position: 0 "4px";

当然有更好的方法!

Answer 1

使用临时变量和0pxhack 有一个简单的解决方法.

.foo {
    @height: 20px;
    @iconHeight: 13px;

    @result: `Math.ceil((parseInt('@{height}') - parseInt('@{iconHeight}')) / 2)`;
    background-position: 0 (0px + @result);
}