SCSS：使用网格时出现编译错误：repeat(auto-fit, minmax(260px, 1fr));

Question

我有有效的 css 网格规则

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
}

然而，scss 编译器会带来以下错误：

Compilation Error Error: minmax(300px, 1fr) is not an integer. ... >> grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));

我可以使用 unquote() 函数跳过它，但我很好奇为什么会这样。我在 SCSS 中做错了什么？

Answer 1

我认为问题是你的 sass 版本，因为我的版本 "node-sass": "^ 7.0.1" 适合我，我刚刚编译它。

因此，如果您想保留 sass 的版本，我会让代码正常工作，我认为它与 px 中的值或函数不兼容。对于 en px 值，您可能需要编写如下 sass 代码（我使用 scss）：

grid-template-columns: repeat (auto-fit, minmax ((# {300px}), 1fr));

如果不兼容，因为它不能识别某些功能，请尝试编写以大写字母开头的功能。

grid-template-columns: Repeat (Auto-fit, Minmax ((# {300px}), 1fr));

SCSS: Getting compilation error when using grid: repeat(auto-fit, minmax(260px, 1fr));