Sass中需用unquote("repeat(#{$n}, 1fr)")生成合法CSS，避免引号包裹；错误写法包括#{}直接插值或误用Sass函数repeat；响应式可用map+@each批量生成；须校验$n类型与正数，并兼顾IE兼容性fallback。
字符串插值不能直接用于grid-template-columns的值中
很多人尝试写 grid-template-columns: #{"repeat($n, 1fr)"};，发现编译报错或生成无效 CSS。Sass 的字符串插值（#{} ）在属性值里只做纯文本替换，不参与计算，而 repeat() 是 CSS 函数，不是 Sass 函数——它必须原样输出到 CSS 中，不能被提前“求值”。关键在于：你不是要“执行” repeat，而是要“写出” repeat。
用 unquote() 配合插值生成合法的 CSS repeat()
当变量 $n 是数字时，直接拼接会导致引号包裹（如 "repeat(3, 1fr)"），浏览器拒绝解析。必须去掉外层引号，让输出变成无引号的原始 CSS 函数调用。
- ✅ 正确写法：
grid-template-columns: unquote("repeat(#{$n}, 1fr)"); - ⚠️ 错误写法：
grid-template-columns: #{"repeat(#{$n}, 1fr)"};（会多一层引号） - ⚠️ 错误写法：
grid-template-columns: repeat($n, 1fr);（Sass 会报错，因为repeat不是 Sass 内置函数）
示例：
$cols: 4;
.grid {
grid-template-columns: unquote("repeat(#{$cols}, 1fr)");
}
输出为：grid-template-columns: repeat(4, 1fr);
立即学习“前端免费学习笔记（深入）”；
需要动态响应不同断点？用 @each + map 批量生成
硬编码每个断点的列数容易出错且难维护。更稳妥的方式是用 map 存储断点与列数映射，再循环生成媒体查询块。
- 定义
$grid-breakpoints: ("sm": 2, "md": 3, "lg": 4); - 用
@each $breakpoint, $count in $grid-breakpoints遍历 - 每个循环内调用
unquote("repeat(#{$count}, 1fr)")，并配合media查询类名（如.grid--#{$breakpoint}） - 注意：
$breakpoint是字符串，需用unquote()或直接拼接类名（.grid--#{$breakpoint}本身无需 unquote）
别忽略单位和响应式 fallback 的兼容性
repeat() 在 IE 中完全不支持，如果项目还需兼容 IE，仅靠插值生成是不够的。
- 必须手动提供
grid-template-columns的 fallback 值（如固定像素或auto-fit+minmax()组合） -
unquote()不解决浏览器兼容问题，它只解决 Sass 编译阶段的语法生成 - 若列宽需响应内容（比如卡片宽度最小 200px），应改用
repeat(auto-fit, minmax(200px, 1fr)))，此时插值只用于第一个参数（auto-fit是关键字，不能插值；200px可以是变量）
真正容易被忽略的是：字符串插值看起来“灵活”，但它把类型安全交给了开发者。一旦 $n 是 null、string 或负数，unquote() 照样输出，CSS 就会静默失效。务必在 mixin 或函数中加 @if type-of($n) == number and $n > 0 校验。
