直接结论：scss不能实现多列排版，仅能组织columns相关css；column-width是响应式核心，column-count为上限兜底，二者共存时前者优先；需配合break-inside: avoid、column-gap等保障可读性与兼容性。
直接结论：别在 SCSS 里“实现”多列排版，SCSS 只是预处理器，真正起作用的是 columns、column-count、column-width 这些原生 CSS 属性——SCSS 的价值只在于帮你更安全、更可维护地组织响应式断点和重复逻辑。
为什么不能用 SCSS 函数生成 columns 行为
SCSS 编译后输出纯 CSS，而多列布局（columns）是浏览器运行时根据容器尺寸、内容流和 CSS 属性动态计算的渲染行为。你无法用 @function 或 @mixin “模拟”列高平衡或跨列断裂控制——这些都依赖 DOM 渲染后的真实几何信息，SCSS 在编译阶段根本接触不到。
常见误区是写一个 @mixin multi-column($count) 然后以为能“适配所有设备”，结果发现小屏下 column-count: 3 强制出三列，文字被压成 100px 宽，阅读体验崩坏。
真正该用 SCSS 封装的，是断点策略、间距比例、断点阈值复用等静态规则。
用 SCSS 组织响应式 column-width + column-count 组合
多数人卡在「列数固定 vs 列宽固定」的选择上。正确做法是：以 column-width 为主约束（响应式根基），用 column-count 做上限兜底，再用 SCSS 把这套逻辑参数化：
示例 SCSS：
$col-min-width: 18rem;
$col-max-count: 4;
.multi-column {
columns: #{$col-min-width} $col-max-count;
column-gap: 2rem;
@media (max-width: 768px) {
columns: #{$col-min-width} 1;
}
@media (min-width: 1200px) {
columns: #{$col-min-width} $col-max-count;
}
}
注意：columns: 18rem 4 等价于同时声明 column-width: 18rem 和 column-count: 4，且前者优先——这是关键逻辑，不是 SCSS 特性，是 CSS 规范本身决定的。
这样写的好处：
- 避免重复写
column-width和column-count两行 - 修改最小列宽时，所有断点自动同步
- 语义清晰：
columns值本身就是「理想宽度 + 上限列数」的自然表达
用 SCSS 混入（mixin）防文字/图片跨列断裂
默认情况下，<p></p>、<img> 等块级元素可能被硬切开塞进不同列，必须显式加 break-inside: avoid（Safari 15.4+ 支持，旧版需双写 break-inside: avoid-column）。SCSS 可帮你统一处理：
@mixin no-column-break {
break-inside: avoid;
// 兼容旧 Safari
@supports not (break-inside: avoid) {
break-inside: avoid-column;
}
}
.article p,
.article blockquote,
.article img {
@include no-column-break;
}
关键点：
- 不要只给
p加，blockquote、figure、pre同样需要 - 确保这些元素父容器没设
overflow: hidden，否则break-inside会失效 - 如果用了 JS 动态插入内容（如评论区），
break-inside不会自动应用到新节点，得手动补
column-gap 与 padding 冲突怎么用 SCSS 避免
很多人设了 column-gap: 2rem，又给容器加 padding: 1rem，以为左右边距是 2rem，实际是 3rem——因为 column-gap 只管列与列之间，不包含内边距。
用 SCSS 统一用逻辑属性管理：
.article {
padding-inline: 1.5rem; // 左右内边距
column-gap: 1.5rem; // 列间空隙
// 不要再写 padding-left/right 或 margin-left/right
}
这样视觉节奏一致，且在 RTL 页面也能自动翻转。若项目需兼容 IE，则改用 padding-left/padding-right 并放弃 column-gap（IE 完全不支持多列布局）。
真正难的不是写对这几行 SCSS，而是意识到：一旦你在多列容器里混入 position: absolute、transform、JS 插入的 DOM 节点，或者用 column-span: all 拉跨列标题，column-fill: balance 就大概率失效——这时与其调 SCSS 变量，不如换 Grid 或 Flexbox 重做布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
