如何计算 LESS CSS 中的百分比？答案

【问题标题】：How to calculate percentages in LESS CSS?如何计算 LESS CSS 中的百分比？
【发布时间】：2012-02-04 10:35:55
【问题描述】：

我想根据LESS CSS 的父容器以百分比计算子容器（div 等）的宽度。

我正在使用 Ethan Marcotte 的论坛：target / context = result。

父容器：620px
子容器：140px

我正在使用这个计算：

div.child-container {
    width: (140/620)*100%;
}

但是输出是：

div.child-container {
    width: 0.2258064516129;
}

我想将小数点移动两位并添加 %，如下所示：

div.child-container {
    width: 22.58064516129%;
}

非常感谢任何提示。

【问题讨论】：

100% == 1，所以数学是有道理的。
根据您的输入，输出看起来很适合我。
@zzzzBov 谢谢，我尝试使用 *10000% 来移动小数点并且它可以工作，但是每次都会以某种方式删除 % 符号。底部示例是我需要的解析输出。
我在 LESS CSS 方面的经验只是查找与这个问题相关的信息，所以我要冒昧地说你需要它说width: 100%*(140/620);，因为我读到它选择了等式中第一个值的单位。
@Hexxagonal 是正确的 - 输出是正确的，您可能使用的是旧版本或非标准版本的 LESS 解析器。你是如何解析你的LESS的？ Less.JS 较新的版本应该可以做到这一点。

【解决方案1】：

根据LESS CSS website，您需要更改方程式的顺序

输出几乎符合您的预期 - LESS 了解颜色和单位之间的差异。如果在操作中使用了一个单位，例如：
@var: 1px + 5;
LESS 将使用该单位作为最终输出——在本例中为6px。

应该是：

width: 100%*(140/620);

【讨论】：

【解决方案2】：

当 OP 询问时，percentage 函数可能不存在，但为了将来参考，我添加了这个答案。

div.child-container {
    width: percentage(140/620);
}

【讨论】：

仅供参考。我尝试了percentage((@index / 10) - 0.01);，但没有用，我不得不添加更多括号percentage(((@index / 10) - 0.01));，因为也许有人想像我一样做更多“困难”的数学，而不仅仅是除法。
我认为这比 OP 选择的答案要干净得多。两者都有效，但这更直接。