怎样在Less中通过函数批量生成CSS栅格系统-css教程-PHP中文网

.less中.make-grid-columns()未生效因非内置mixin，需自定义递归循环生成.col-1至.col-12；响应式需用@each遍历断点map并嵌套列生成；类名拼接须用@{n}或e()，偏移类用margin-left计算，且必须全局声明box-sizing:border-box。

怎样在less中通过函数批量生成css栅格系统

Less里用`.make-grid-columns()`生成列宽类时为什么没生效

因为Less不自带.make-grid-columns()——这是Bootstrap 3的Mixin，直接复制过去会报undefined mixin。你得先定义基础变量和核心循环逻辑，再封装自己的栅格生成器。

关键不是套用现成名字，而是用.each()或递归.loop()配合@index动态拼类名和width。比如12列系统，要生成.col-1到.col-12，就得让Less在编译期展开12次规则。

别写for (let i = 1; i ——Less没JS运行时，只能靠Mixin递归或<code>.each()（需Less 4.0+）
用@columns: 12;统一控制总列数，所有计算基于它，避免硬编码
列宽公式固定为width: (100% / @columns) * @n;，其中@n是当前列数，确保等比缩放

如何用递归Mixin兼容Less 3.5+（不用`.each()`）

Less 3.5不支持.each()，但能靠自调用Mixin实现等效效果。核心是设终止条件（如@n > @columns），每次调用传入@n + 1，并在内部生成对应CSS规则。

.make-col-classes(@n, @columns) when (@n =<p>注意<code>percentage()</code>比手动写<code>100% / @columns * @n</code>更安全，它自动处理小数精度和单位包裹；递归末尾必须加空规则（如<code>.make-col-classes(@n, @columns) when (@n > @columns) {}</code>）防止无限循环。</p><h3>响应式断点下批量生成<code>.col-sm-*</code>、<code>.col-md-*</code>该怎么做</h3><p>不能为每个断点重复写一套递归Mixin——那样维护成本爆炸。应该把断点配置抽成Map，再用嵌套循环生成。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><p>例如用<code>@grid-breakpoints: {xs: 0, sm: 576px, md: 768px, lg: 992px};</code>，然后外层遍历断点键，内层调用列生成Mixin：</p><pre class="brush:php;toolbar:false;">.make-responsive-grid(@breakpoints, @columns) when (ismap(@breakpoints)) {
  .each(@breakpoints, {
    @key: e(%("%a", @key));
    @val: e(%("%a", @val));
    @media (min-width: @val) {
      .make-col-classes(1, @columns);
      // 重命名类名：把.col-* 变成 .col-@{key}-*
      // 实际需配合字符串拼接和规则重写，此处略去细节
    }
  });
}

这里.each()是Less 4.0+特性；若用Less 3.5，就得手写多层嵌套Mixin，且断点越多越难读。更稳妥的做法是分文件：一个grid-columns.less只管列宽，多个grid-sm.less、grid-md.less分别导入并覆盖@screen变量后调用主Mixin。