LESS 为带有正斜杠的网格模板声明生成错误代码

Question

我使用这个 CSS 作为我的 CSS 网格声明：

#slider_area {
  grid-template: 1fr 1fr 1fr / 1fr 32%;
  grid-column-gap: 8px;
  grid-row-gap: 4px;
}

但它转换为：

#slider_area {
    grid-template: 1fr 1fr 1fr 32%;
    grid-column-gap: 8px;
    grid-row-gap: 4px;
}

在我的 LESS 中，页面视图中断。

您可以在这里检查：

如果是错误，我可以在哪里报告它？有解决方法吗？

Answer 1

问题是 LESS 认为这是一个数学运算。

例如，如果你写：

#slider_area #A { grid-area: 1 / 2 / 1 / 2; }

然后它会输出：

#slider_area #A { grid-area: 0.25; }

您可以利用转义来解决该问题：

转义允许您使用任意字符串作为属性或变量值。〜“anything”或〜“anything”内的任何内容均按原样使用，除了插值之外没有任何变化。

#slider_area {
  grid-template: ~"1fr 1fr 1fr / 1fr 32%";
  grid-column-gap: 8px;
  grid-row-gap: 4px;
}