少量字符串插值

Question

我在Ems中指定字体大小，这意味着它们与父容器相关。我有几个子元素，并且每次我对它进行计算时都不想重复父大小。所以我有：

@articleFontSize: 21/16;

如果，继续，我使用：

font-size: @articleFontSizeem;

如你所料，我得到'变量@articleFontSizeem未定义'。

如果我插入它：

font-size: @{articleFontSize}em;

然后又拒绝编译，我只是得到一个简单的'语法错误'。

font-size: @articleFontSize~"em";

这个编译 - 但在输出中我得到的代码如下：

font-size: 1.3125 em;

即。它在单位之前添加了一个空格，因此浏览器会忽略它们。

我在Mac（2.0 beta 5）上运行LiveReload，根据设置使用'System Ruby 1.8.7'进行编译。

更新的解决方案：

一个。添加零金额的正确单位：

font-size: 0em + @articleFontSize;

湾（我之前的替代方法 - 使用函数）：

.rFont(@target, @context) {
    @ratio: @target/@context;
    font-size: ~"@{ratio}em";
}

跟：

.rFont(11,@articleFontSize);

输出（正确，请注意没有不需要的空格）：

font-size: 0.7063571428571428em;

我没想到将@ {ratio}置于代字号+引号内仍然展开它。但它有效（几乎没有别的。）

这个问题有帮助： concatenate values in less (css) without a space

Answer 1

尝试

font-size: 0em + @articleFontSize;

Answer 2

你能把em放在文章字体大小变量中吗？例如：

@articleFontSize: 21/16em;

或者，如果那不起作用，可能：

@articleFontSize: (21/16)em;

Answer 3

请改为the rem measurement unit。它具有相对ems /％的所有好处，同时保持了px的可预测性，并防止了“复合大小”的儿童元素。