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

Question

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

附加信息：

• 窗户；
• Chrome 57.0.2987.110 32 位；
• Firefox 52.0.1 32 位。

Answer 1

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

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

然后

parsing
1.令 list 为从 value 调用 parse a list of component values 返回的值。

然后

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

差不多了

consume a component value
否则，如果当前输入的token是一个，consume a function并返回它。

最后

consume a function
创建一个函数，其名称等于当前输入标记的值，并且其值最初是一个空列表。
反复消费下一个输入token，处理如下：

返回函数。
这是一个解析错误。返回函数。 其他的
重新使用当前输入令牌。使用一个组件值并将返回的值附加到函数的值。

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