LESS字符串插值

Question

我正在使用 Ems 单位指定字体大小，它们是相对于父容器而言的。我有多个子元素，在进行计算时不想每次都重复父级尺寸。因此我有：

@articleFontSize: 21/16;

如果我进一步使用：

font-size: @articleFontSizeem;

如你所料，我收到了“变量@articleFontSizeem未定义”的错误信息。

如果我进行插值：

font-size: @{articleFontSize}em;

然而它再次拒绝编译，只显示一个简单的“语法错误”。

font-size: @articleFontSize~"em";

这段代码可以编译 - 但我得到的输出结果是这样的：

font-size: 1.3125 em;

即在单位前添加一个空格，这样浏览器就会忽略它们。

我正在Mac上运行LiveReload（2.0 beta 5），设置显示使用“系统Ruby 1.8.7”进行编译。

更新的解决方案：

a. 添加正确单位的零数量：

font-size: 0em + @articleFontSize;

b. (我之前提出的替代方法 - 使用函数)：

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

被调用时:

.rFont(11,@articleFontSize);

输出（正确，注意不要有多余的空格）：

font-size: 0.7063571428571428em;

我没想到把@{ratio}放在波浪号加引号里仍然会扩展它。但它可以工作（几乎没有其他方法可以）。这个问题有所帮助： 在less(css)中连接值而不留空格

- William Turrell

---

转义方法对我很有帮助，谢谢。 - Huangism

这有点与另一个问题混淆了：“如何将LESS变量转换为另一个单位？” #只是说一下 —— 因此，“如何在LESS中进行字符串插值？”的实际基本答案是："@ {my-var}"。只有这个出现在规则中，例如.hidden&::before { content: "@{my-var}"; display: block; }。明白了，谢谢。 - WoodrowShigeru

Answer 1

尝试

font-size: 0em + @articleFontSize;

- Rob Anderson

---

漂亮的技巧，但鉴于你可以写font-size: unit(@articleFontSize, em);，你不再需要它。 - TKrugg

Answer 2

你能把 em 放在 articleFontSize 变量里吗？例如：

@articleFontSize: 21/16em;

或者如果那不起作用，也许：

@articleFontSize: (21/16)em;

- Andrew Rasmussen

---

是的，你可以。我之前排除了这个选项，但看起来我的逻辑是错误的 - 我应该设置： - William Turrell

我实际上需要将初始大小设置为“21”（没有公式或单位），这样我以后就可以执行：font-size: 12/@articleFontSize 并将其表达为Ems。（如果我没有使用LESS，我必须将12/16em更改为12/21em才能获得正确的大小，如果你明白我的意思的话...）也许我最好手动输入它... - William Turrell

@articleFontSize: (21/@articleFontSize)em; 括号也不起作用 - 它会验证，但无论您使用变量名称还是21/16等，都会有一个多余的空格。我不知道这个空格是从哪里来的... - William Turrell

你能像这样做吗 @tempSize: 21em，@articleFontSize: @tempSize / 16？ - Andrew Rasmussen

您可以在数字中指定单位，并且它们会被正确添加（在等式的任一侧），但不能在变量名称之后添加。我不是特别喜欢这个解决方案，因为像“21em”这样的变量声明对我来说非常令人困惑，因为它是一个巨大的大小，不反映实际值。我决定编写一个函数，然后发现可以将整个内容包装在引号中，仍然可以解析-如上所示的解决方案。感谢您的帮助！ - William Turrell

小心使用REM。此外，IE 8及以下版本和Opera Mini仍不支持它。另外，一些旧版本的Webkit在媒体查询中使用REM时无法解析。 - user1010892

Answer 3

不妨看看 rem测量单位。它具有相对ems /％的所有优点，同时保持px的可预测性并防止“复合大小”子元素。

- user596149

---

这与问题无关。单位类型是不相关的。 - WickyNilliams