LESS转换含斜杠的grid-template声明生成错误代码，如何反馈及解决

你遇到的确实是LESS对CSS Grid复合属性grid-template的解析bug——它错误地将斜杠/分隔的行、列模板合并成了单一的行模板列表，把原本的列定义32%当成了第四行的高度值，直接导致网格布局失效。

临时解决方案 #

这里有两个靠谱的临时修复方法，任选其一即可：

• 拆分属性声明（推荐）：放弃复合的grid-template，改用grid-template-rows和grid-template-columns分开定义，完全避开LESS的解析问题，同时代码语义更清晰：

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

• 使用LESS转义语法：用~""包裹整个grid-template的值，强制LESS原封不动地输出这段CSS，不做任何解析：

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

Bug反馈渠道 #

如果要正式反馈这个bug，你可以前往LESS的官方代码仓库（托管在GitHub上，仓库名称为less/less.js）的Issues页面提交报告。提交时建议包含这些信息：

• 清晰的问题说明：原LESS代码、转换后生成的错误CSS、预期的正确CSS
• 可复现的最小代码示例
• 你使用的LESS版本（如果能确定的话）

内容的提问来源于stack exchange，提问作者Black