Less中repeat()是CSS函数而非Less函数，需用~"repeat(@{cols}, @{width})"避免编译错误；fr值须加引号防变量解析；动态列宽可用unit()计算，但fr不支持unit运算。
Less里直接用repeat()会报错，因为它是CSS函数不是Less函数
Less编译器在解析时遇到repeat(3, 1fr)会当作普通字符串处理，但如果你把它塞进grid-template-columns属性里，它最终能生效——前提是别让Less提前“吃掉”括号或变量。常见错误是写成repeat(@cols, @width)，结果Less尝试执行这个不存在的函数，报undefined function repeat。
真正要做的，是把repeat()当纯CSS文本拼进去，不让Less解析它内部结构：
- 用字符串插值：
~"repeat(@{cols}, @{width})"（注意~""和@{}的写法） -
@cols和@width必须是已定义变量，不能是表达式（比如@{cols + 1}不合法） - 如果
@width含单位（如200px），记得加引号或确保它本身是字符串类型
支持动态列数但固定单列宽：用数字变量+~"repeat()"
这是最常用场景：列数可配，每列等宽。例如响应式网格中，小屏2列、中屏3列、大屏4列。
@small-cols: 2;
@medium-cols: 3;
@large-cols: 4;
.grid-small {
grid-template-columns: ~"repeat(@{small-cols}, 1fr)";
}
.grid-medium {
grid-template-columns: ~"repeat(@{medium-cols}, 1fr)";
}
.grid-large {
grid-template-columns: ~"repeat(@{large-cols}, 1fr)";
}
注意：1fr不能写成1fr不加引号——Less会把它当变量名去查找，报variable @fr is undefined。所以要么用"1fr"，要么用~"1fr"，但更稳妥的是整个repeat()用~""包裹。
想让单列宽也动态计算？先用Less运算再转字符串
比如总宽固定为1200px，想均分@n列，每列1200px / @n。Less支持基础运算，但结果需手动转为带单位的字符串：
- 用
unit(1200px / @n, px)得到数值+单位（如400px） - 再套进
repeat()：~"repeat(@{n}, @{col-width})" - 完整示例：
@total-width: 1200px; @n: 3; @col-width: unit(@total-width / @n, px); .grid-dynamic { grid-template-columns: ~"repeat(@{n}, @{col-width})"; } - ⚠️坑点：
unit()对fr无效（unit(1fr / 2, fr)不工作），fr只能手写字符串
兼容性与维护提醒：别在repeat()里混用fr和px做Less运算
Less无法计算1fr + 20px这类混合单位表达式，编译直接失败。CSS Grid允许repeat(2, 1fr 20px)这种写法，但Less里不能写成~"repeat(2, @{fr-unit} @{gap})"并指望它算出1fr 20px——因为@{fr-unit}和@{gap}只是两个字符串，拼出来是"1fr 20px"，没问题；但如果你试图让Less做@fr-unit + @gap，就错了。
真正容易被忽略的是：Grid的repeat(auto-fit, minmax(...))没法用Less变量动态替换minmax里的值，因为minmax()也是CSS函数。此时只能用~"minmax(@{min}, @{max})"整段字符串插值，且@min/@max必须是已知字符串（如"200px"或"1fr"），不能是计算式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
