使用数学函数获取整数值

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

使用临时变量和 0px hack 有一个简单的解决方法。

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

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