使用数学函数获取整数值答案

【问题标题】：Using math functions to get integer values使用数学函数获取整数值
【发布时间】：2012-12-12 05:42:31
【问题描述】：

我有一些 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";

肯定有更好的方法！

【问题讨论】：

更新： 我发现 round 函数在这种特定情况下对我有用，但是我仍然想知道是否有一般的方法来解决这个问题。
恕我直言，在这种情况下，我会重新考虑设计并选择不需要四舍五入的尺寸，因为由于四舍五入，计算值无论如何都会“关闭”。跨度>
@RoToRa，也许在这种情况下这是一个更好的选择，但总的来说问题仍然存在。
“/2”不应该在第一行的 Math.ceil 调用中吗？含义背景位置：0 Math.ceil((@height - @iconHeight) / 2)
@Tonio，啊，是的，你是对的。

标签： javascript css less

【解决方案1】：

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

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

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

【讨论】：