LESS CSS - 无法将两个像素单位相除并返回一个无单位值。

Question

我想(暂时)移除我的变量@baseLineHeight和@baseFontSize的单位，以便我可以将它们相除得到一个相对的line-height。这是我尝试过的方法:

@baseFontSize: 12px;
@baseLineHeight: 18px;
font: @baseFontSize~"/"@baseLineHeight/@baseFontSize sans-serif;

生成以下错误：

Object #<Object> has no method 'toCSS' (Less::ParseError)

首选输出：

font: 12px/1.5 sans-serif;

- Vitamin

Answer 1

同时似乎已经有一个相关的函数： http://lesscss.org/functions/#misc-functions-unit 以下是原始评论中的代码，仅供完整性参考（感谢cfx）。

font: @baseFontSize~"/"unit(@baseLineHeight/@baseFontSize) sans-serif;

- Niklas Peter

---

这应该是正确的答案。你的 LESS 应该是 font: @baseFontSize~"/"unit(@baseLineHeight/@baseFontSize) sans-serif;。 - cfx

这确实是正确的答案。我非常确定我之前的答案是针对一个没有实现这个方法的旧版本的LESS。 - Vitamin

Answer 2

我错过了有关JavaScript评估的文档部分。这似乎解决了我的问题：

font: @baseFontSize~"/"`parseInt("@{baseLineHeight}") / parseInt("@{baseFontSize}")` sans-serif;

- Vitamin

---

@bzx 还有4个小时我才能:o - Vitamin

抱歉，我不知道.. @Vague - bzx

Answer 3

其他答案似乎并不实际有效。

据LESS documentation所述，unit() function函数将删除或更改维度的单位。由于该函数仅接受单个维度作为参数（以及一个可选参数），因此您将使用以下内容：

unit((@baseLineHeight/@baseFontSize))

由于严格数学，你会注意到上面的一行可能需要用括号括起来，以便实际评估数学公式。

@baseFontSize: 12px;
@baseLineHeight: 18px;

p {
  font: @baseFontSize ~"/" unit((@baseLineHeight/@baseFontSize)) sans-serif;
}

上面的LESS将输出以下期望结果：

p {
  font: 12px / 1.5 sans-serif;
}

- Josh Crozier

---

好的，由于默认情况下 strict-math 是关闭的，因此 unit(@baseLineHeight/@baseFontSize) 对大多数情况都适用（对于 sm=on，它将是 unit((@baseLineHeight/@baseFontSize)) - 不需要重复使用 unit 两次）。 - seven-phases-max

@seven-phases-max 嗯，我之前使用的是这个在线LESS编译器，虽然strict-math默认是关闭的，但似乎额外的括号仅仅是因为它们跟在~"/"后面（我猜测这会导致它像开启了严格数学模式一样对该行进行求值）。不过我已经去掉了多余的unit()函数。感谢你的有益评论。 - Josh Crozier

更正一下，是的：unit(@baseLineHeight/@baseFontSize)在font中不起作用，因为该属性被硬编码为始终使用sm:on。所以实际上整个语句将变成font: @baseFontSize / unit((@baseLineHeight/@baseFontSize)) sans-serif;，并且可以使用任何一个sm编译器设置。（有关更多详细信息，请参见#1627：尽管我个人认为这样的硬编码属性是语言缺陷，因为你永远不知道哪个是硬编码的，哪个不是）。 - seven-phases-max