less中columns mixins应封装column-count、width、gap、rule等参数并自动添加-webkit-、-moz-前缀，支持响应式断点内联控制与break-inside、column-fill等兼容性处理，而非依赖autoprefixer。
Less中columns属性的Mixins怎么写才不重复写vendor前缀
直接用 columns 原生属性在旧版Chrome、Safari或iOS WebView里会失效，必须补全 -webkit-columns 和 -moz-columns。手写太容易漏，也难维护。Mixins要做的不是“封装一层”，而是把列数、列宽、列间距、列规则线这些可变参数拆开，同时自动注入对应前缀。
推荐这样写：
.cols(@count, @width: auto, @gap: 1em, @rule: none) {
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
<p>-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;</p><p>-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;</p><p>-webkit-column-rule: @rule;
-moz-column-rule: @rule;
column-rule: @rule;
}</p>
注意三点：
-
@width默认设为auto，避免强制指定宽度导致响应式列数异常 - 不要只封装
column-count单一属性——实际项目中列宽和间隙几乎总是要调的 - Firefox 3.5+ 支持
-moz-，但新版已原生支持；保留它只为照顾仍在线的旧内网系统
如何让columns Mixins适配响应式断点
单纯在Media Query里重复调用 .cols() 会导致CSS体积膨胀，尤其当多个断点都要配置不同列数时。更稳妥的做法是把断点逻辑收进Mixins内部，用参数控制条件输出。
例如：
.cols-responsive(@sm: 1, @md: 2, @lg: 3, @width: auto, @gap: 1em) {
.cols(@sm, @width, @gap);
<p>@media (min-width: 768px) {
.cols(@md, @width, @gap);
}</p><p>@media (min-width: 1024px) {
.cols(@lg, @width, @gap);
}
}</p>
使用时：.cols-responsive(1, 2, 3, 12rem);
关键点：
- 参数顺序按移动优先排列，符合主流断点习惯
- 不生成冗余的
@media块——如果某断点列数和上一级相同，就跳过该媒体查询（需配合Less守卫实现，此处略） - 列宽
@width保持统一，避免小屏列宽过大撑破容器
columns Mixins里最容易被忽略的兼容性陷阱
写了前缀还不够，column-fill、break-inside 这些配套属性没处理，多列布局在Chrome 90+ 或 Safari 15.4里依然会错行、断词异常甚至内容重叠。
必须同步补全：
.cols-strict(@count, @width: auto, @gap: 1em) {
.cols(@count, @width, @gap);
<p>// 防止块级元素跨列断裂</p><blockquote><ul><li>{
break-inside: avoid;
-webkit-break-inside: avoid;
page-break-inside: avoid;
}</li></ul></blockquote><p>// 强制均衡填充（尤其对动态内容）
column-fill: balance;
-webkit-column-fill: balance;
-moz-column-fill: balance;
}</p>
特别注意：
-
break-inside: avoid必须作用于直接子元素，写在容器上无效 -
column-fill: balance在Firefox中对flex子项支持差，若内容含display: flex的卡片，得额外加align-self: flex-start - iOS Safari 15.2–15.6 存在
column-gap渲染偏移bug，临时方案是改用padding模拟间隙
为什么不用autoprefixer代替columns Mixins
autoprefixer 对 columns 系列属性的支持是残缺的——它能加前缀，但无法推导 column-count 和 column-width 的组合逻辑，更不会帮你注入 break-inside 或处理 column-fill 的浏览器差异。
比如你写：
article {
columns: 3;
}
autoprefixer 只会输出：
article {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
而真实项目需要的是：
- 列数随屏幕变化
- 间隙单位用
rem而非固定像素 - 子元素防断行
- 内容高度不均时强制平衡
这些都得靠Mixins组织逻辑。autoprefixer只是后置补丁，不能替代设计层的抽象。
真正省时间的，是把「列数+宽度+间隙+防断行+平衡填充」这五件事锁死在一个调用里，而不是每次打开编辑器都重新拼一遍前缀和媒体查询。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
