Question

我注意到使用Less with font shorthand

时出现问题

.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它试图分裂？

Answer 1

刚遇到这个问题，转义函数（for less.js无论如何）是： E（）喜欢这个

font: @weight @size e('/') @height "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

Answer 2

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

将您的CSS分为非速记，单独的规则

font-size：@size; line-height：@height;
转义部分或全部LESS字体速记规则。斜杠/本身是逃避的最佳部分。您可以使用e，e("/")转义语法或更新，更好记录的代字号~"/"。您还可以使用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;

Answer 3

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

请参阅1.4 notes here

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

使用Less时在CSS值中斜杠（`/`）（例如在`font`简写中）

3 个答案: