18

在使用带有字体速记的 Less 时，我注意到了一个问题

.font(@weight: 300, @size: 22px, @height: 32px) {
    font: @weight @size/@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}

以上失败了

this.a.toCSS is not a function
http://localhost/tumblr/modern1/css/style.less on line 1, column 0:
1. @highlight: #cb1e16;
2. @shade1: #cb1e16;

当我拆分属性时，它可以工作

.font(@weight: 300, @size: 22px, @height: 32px) {
  font-weight: @weight;
  font-size: @size;
  line-height: @height;
  font-family: "Yanone Kaffeesatz", "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

}

我认为这是因为斜线/那是导致问题的原因，我认为因为 Less 可以进行计算，例如。2px + 5 = 7px它试图分道扬镳？

4

3 回答 3

25

刚碰到这个问题，转义函数（反正对于less.js）是：e() 像这样

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
于 2010-11-19T09:57:45.820 回答
18

正斜杠/字符导致 LESS 编译器将字体大小除以行高。你可以：

  1. 将你的 CSS 分成非速记的、单独的规则

    字体大小：@size；行高：@height；

  2. 转义部分或全部 LESS 字体速记规则。斜线/本身是最好的逃脱部分。您可以使用 e、e("/")转义语法或更新的、文档更好的 tilde-quote ~"/"。您还可以使用 LESS 字符串插值@{}语法来插入变量。

试试这个：

font: @weight @size~"/"@height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

或这个：

font: @weight ~"@{size}/@{height}" "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
于 2011-09-07T01:26:09.190 回答
2

LESS 1.4 及更高版本现在有一个“strictMath”选项，可以解决和字体速记之间的歧义。在 1.4 中，它默认禁用以使转换更容易，但在以后的版本中，它将默认启用。

请参阅此处的 1.4 注释

启用 strictMath 后，所有数学运算都必须用括号括起来，(10px / 5px)并且字体 short 中的正斜杠不会被解释为除法。

于 2013-08-21T20:57:31.367 回答