CSS值中使用少的slashes（``/`）（例如，在``font'shorthand''中

StackOverflow https://stackoverflow.com/questions/3090340

  •  29-09-2019
  •  | 
  •  

题

我注意到与字体速记少使用的问题

.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;

}

我认为这是因为斜线 /那是导致问题的原因，所以我认为较少的计算可以进行计算，例如。 2px + 5 = 7px 它试图做出分歧吗？

有帮助吗？

解决方案

只需遇到这个问题，Escape功能（无论如何）是：E（）像这样 

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

其他提示

前向斜线 / 角色正在导致编译器较少将您的字体大小除以线条高度。你可以：

  1. 将您的CSS分为非票据，单独的规则

    字体大小：@Size;线高： @height;

  2. 逃脱您的一些或全部较少的字体速记规则。斜线 / 本身是逃脱的最好部分。您可以使用E， e("/") 逃脱语法或更新的，更好的记录的Tilde-Quote ~"/". 。您也可以使用较少的字符串插值 @{} 语法插入变量。

试试这个：

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

或这个：

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

少1.4及以上现在有一个“严格的”选项，可以解决和字体速记之间的歧义。在1.4中，默认情况下它是禁用的，可以使过渡更轻松，但是在以后的版本中，它将默认情况下启用。

看到 1.4笔记在这里

当启用了严格符号时，所有数学操作都必须包裹在括号中 (10px / 5px) 字体短中的前向斜线将不会被解释为划分。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top