更少的响应式网格

Question

我正在尝试以较少的方式创建响应式网格系统，我遇到了错误，我不确定我做错了什么。

@grid-breakpoints: {
  xs: 0;
  sm: 576px;
  md: 768px;
  lg: 992px;
  xl: 1200px;
  xxl: 1400px;
};

.tb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  each(range(50), {
    .tb-grid-gap-@{value} {
      row-gap: replace(~"apx", 'a', @value);
      column-gap: replace(~"min(apx, 8%)", 'a', @value);
    }
  });

  > * {
    grid-column-start: span 12;
  }

  each(grid-breakpoints, .(@v, @k, @i) {
  @media (min-width: replace(~"v", 'v', @v)) {
  
  each(range(12), {
    .tb-grid-@{k}-@{index} {
      grid-column-start: replace(~"span i", 'i', @value);
    }
  });
  }

});
}

我已经在 Less-To-CSS Playground 中运行了代码;

但是当我用其他任何方式测试它时，我给了我错误。