LESS CSS 计算

Question

以下是我想要做的事情。不确定是否可以使用LESS CSS实现，但我有一种感觉，只是找不到语法。

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

因为@bgsize == 50%，所以我尝试的所有方法都导致脚本失败。

- Fresheyeball

---

谁给我点了踩？能详细说明一下吗？ - Fresheyeball

Answer 1

实际上，更优雅的方法是使用LESS中内置的percentage()函数。

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

也许这是在较新版本的LESS中添加的。

- fletom

---

我非常喜欢这种方法，将来会继续使用它，但我会把绿色勾号留在原地，因为ChssPly76真的向我解释了为什么我的方法失败了，并且反应更及时。不过你的方法确实很酷，谢谢！你得到了我的点赞。 - Fresheyeball

是的，这是上面答案的一种补充。我没有解释原因，因为ChssPly76已经解释了。 - fletom

我不在意分数或其他什么，但是更新的答案不应该显示在前面吗？你可以随意编辑我的回答以添加解释，或编辑ChssPly76的回答以使用更加更新的技术。我无所谓哪种方式。 - fletom

Answer 2

据我所知，表达式结果将始终使用与其操作数相同的单位；在末尾添加百分号最多会产生类似于“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-pixels”间接引用。

- ChssPly76