很少为网格模板生成错误的代码

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

以我的经验，页面浏览中断。

您可以在这里检查：

https://www.webtoolkitonline.com/less-to-css.html

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

Answer 1

感觉像是LESS中的错误，您可以使用此解决方法：

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

e函数将从变量中去除括号

Answer 2

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

例如，如果您写：

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

然后它将输出：

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

您可以使用escaping解决此问题：

转义允许您使用任意字符串作为属性或可变值。 〜“ anything”或〜'anything'内部的任何内容都用作除插值外没有任何变化。

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