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

Question

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

我正在使用 Ethan Marcotte 的论坛：目标/上下文=结果。

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

我正在使用这个计算：

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

但是输出是：

div.child-container {
    width: 0.2258064516129;
}

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

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

非常感谢任何提示。

Answer 1

根据 LESS CSS 网站，您需要更改方程的顺序

输出几乎与您所期望的一样 - LESS 理解颜色和单位之间的差异。如果在操作中使用单位，例如：

@var: 1px + 5;

LESS 将使用该单位作为最终输出 - 在本例中为 6px。

应该是：

width: 100%*(140/620);

Answer 2

也许当OP询问时，percentage函数不存在，但供将来参考我添加这个答案。

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

Answer 3

对于2022年，LESS 4.0和除法运算关注的是：

从 4.0 开始，不会使用 / 运算符在括号之外执行除法。

<前><代码>@color: #222 / 2; // 结果是 `#222 / 2`，而不是 #111 (!)
背景颜色：（#FFFFFF / 16）； //结果是#101010

请参阅文档。