less 不提供比原生 css grid 更便捷的语法糖，因其作为预处理器无法绕过 css 规范限制，如 repeat(@n, 1fr) 编译期和运行时均失效，应改用 auto-fit + minmax() 封装 mixin，并在必要时用 js 动态设置列数。
没有。Less 本身不提供比原生 CSS Grid 更“便捷”的语法糖，它只是预处理器，不能绕过 CSS 规范限制——比如 repeat(@n, 1fr) 永远无效，grid-template-rows: 100px / 200px 中的 / 还会触发除法运算，必须转义。
为什么 repeat(@n, 1fr) 在 Less 中根本走不通
这不是写法问题，是编译期和运行时双重失效：
-
@n: 3;→repeat(@n, 1fr)编译后看似输出repeat(3, 1fr)，但只要@n来自计算（如@n: @cols - 1）或条件分支，就会报错或静默丢弃整条规则 - 即使编译成功，浏览器也只认字面量数字、
auto-fit或auto-fill，repeat(var(--n), 1fr)在 Computed 面板里直接为空 -
~"repeat(@{n}, 1fr)"是字符串拼接，变量展开但类型不校验，无法参与数学运算，出错时只报模糊的Parse error
如何安全地用 Less 封装 Grid 列声明
放弃控制“列数”，改用 auto-fit + minmax() 控制“单列最小宽度”——这是 Less 能真正介入且浏览器能执行的环节：
- 定义 mixin：
.grid-cols(@min: 250px, @gap: 1rem) { grid-template-columns: repeat(auto-fit, minmax(@min, 1fr)); gap: @gap; box-sizing: border-box; } - 调用时只改参数：
.main-grid { .grid-cols(280px, 1.2rem); }，无需改类名或重写规则 - 别把 mixin 套在每个卡片上——每次调用都会生成一套完整 CSS 规则，体积线性膨胀
- IE10/11 兼容需额外加
-ms-grid-columns，但它不支持auto-fit，只能退化为固定列数（需配合递归 mixin 生成）
什么时候必须放弃 Less，改用 JS 动态设置
当你明确需要“就是 N 列”，且 N 来自运行时（用户设置、API 返回、URL 参数）时，Less 和纯 CSS 都无能为力：
- 读变量：
const n = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--cols').trim()); - 写样式：
el.style.gridTemplateColumns = `repeat(${n}, 1fr)`;（注意：内联样式优先级高于 CSS 规则） - 避免高频触发重排：不要在
scroll或resize中直接设，可用防抖或只在初始化/变量变更时更新 -
/符号在 Less 中默认触发除法，grid-area: 2/2/3/3必须写成grid-area: ~"2/2/3/3"否则会被算成小数
真正容易被忽略的点是：Less 的作用域规则会让 @media 块内调用未在此作用域定义的 mixin 报 Undefined mixin，而不是变量未定义；断点 mixin 必须在全局定义，再显式调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
