编译Sass时Grid代码报错但浏览器运行正常的问题咨询

你的Grid布局代码不存在语法错误。你写的-ms-grid-columns: (1fr)[2]是适配旧版微软系浏览器的兼容前缀写法，grid-template-columns: repeat(2, 1fr)是符合W3C标准的CSS Grid语法，在支持标准Grid的Chrome等现代浏览器中运行正常，完全符合规范。

你遇到的编译报错确实和2018年的旧版SASS编译器直接相关。旧版本的SASS编译器会将CSS原生的repeat()函数、以及带中括号的前缀写法误识别为SASS自身的语法规则，尝试解析这部分本不需要SASS处理的原生CSS代码，解析逻辑不匹配就会抛出语法错误提示，属于编译器自身的兼容缺陷。

你可以选择以下两种方式解决问题：

• 升级你的Live SASS Compiler插件到当前仍在维护的更新版本，新版已经修复了对原生CSS Grid相关语法的识别问题，不会再误判合法CSS为错误代码。
• 若暂时无法升级编译器，可以给需要原样输出的原生CSS代码包裹SASS插值标记，例如将grid-template-columns: repeat(2, 1fr)改写为grid-template-columns: #{'repeat(2, 1fr)'}，明确告知编译器这部分内容直接输出不需要解析，即可规避报错。

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