较少CSS - 无法划分两个像素单位并返回无单位值

Question

我想（暂时）删除我的变量@baseLineHeight和@baseFontSize的单位，以便我可以将它们分开以获得亲戚{{1} }。这就是我尝试过的：

line-height

生成以下错误：

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

首选输出：

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

Answer 1

同时似乎有一个功能： http://lesscss.org/functions/#misc-functions-unit

这里是评论中的代码，只是为了完整性。 （感谢cfx）。

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

Answer 2

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

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

Answer 3

其他答案似乎并没有起作用。

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

unit((@baseLineHeight/@baseFontSize))

由于strict math，您会注意到上面的行可能需要用括号括起来，以便实际评估数学。

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

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

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

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