动态设置`grid-template-columns` css属性的值

Question

让我们从一个例子开始：https://jsfiddle.net/ilyamilosevic/7nxv8cof/。因此，在示例中，我们将grid-template-columns的值设置为repeat(${n}, 1fr)，其中n是列数。在Chrome中打开devTools之后（或者在Firefox中，无关紧要），我们看到前面提到的属性的值实际上是简洁的替代grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr）到简洁repeat(10, 1fr)如果{{1} }。你可以称之为挑选，但我感兴趣为什么会这样。

其他信息：

• 窗;
• Chrome 57.0.2987.110 32位;
• Firefox 52.0.1 32位。

Answer 1

如果您按照规范的步骤进行操作

  

setProperty
  5.让组件值列表成为属性属性的parsing值的结果。

然后

  

parsing
  1.Let list是从值调用parse a list of component values返回的值。

然后

  

parse a list of component values
  1.重复consume a component value直到返回a，将返回的值（最终除外）附加到列表中。返回列表。

几乎没有

  

consume a component value
  否则，如果当前输入标记是＆lt; function-token＆gt;，consume a function并返回它。

最后

  

consume a function
  创建一个名称等于当前输入标记值的函数，并使用最初为空列表的值   重复使用下一个输入令牌并按如下方式处理：
  ≤） - 令牌GT;
      返回功能。
  ＆LT; EOF令牌＆GT;这是一个解析错误。返回功能。   别的什么       重建当前输入令牌。使用组件值并将返回的值附加到函数的值。

简而言之，当它是一个函数时，它会被执行并且它的结果被分配。