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 中，页面视图中断。

您可以在这里查看：

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 解决问题：

Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.

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

Answer 3

如 , this is a bug with LESS, where the forward slash is interpreted as a division slash (see the report 中所述。

所以不用 grid-template shorthand 属性:

grid-template: 1fr 1fr 1fr / 1fr 32%;

只要坚持手写属性：

grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 32%;

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

LESS generates wrong code for grid-template declaration with forward slashes

css

less

css-grid