scss @for 循环仅能静态生成等宽栅格类（如.col-3{width:33.333%}），无法实现真正瀑布流；因瀑布流需运行时动态计算各列高度并插入最短列底部，必须依赖css columns、grid或js库（如masonry）。
SCSS @for 循环只能生成静态栅格类，不是瀑布流
想用 @for 实现“多栏瀑布流”是常见误解。SCSS 在编译时就结束了，它看不到 DOM 高度、元素数量或容器实际尺寸，因此完全无法决定“第 5 个卡片该插在哪一列底部”。所谓“动态生成百分比宽度”，仅指批量输出 .col-2、.col-3 这类等宽工具类，适用于响应式栅格系统，而非 Masonry 类布局。
常见错误现象：写了 @for $i from 2 through 6 { .col-#{$i} { width: #{percentage(1 / $i)}; } }，结果发现所有元素还是从上到下堆叠，没形成多列错落——因为这只是设了宽度，没处理浮动、flex 排序或列容器隔离。
- 必须明确：生成的每个
.col-N类只控制单个元素的宽度，不定义其所属“列容器” - 若要真正多栏并排，还需额外声明父容器为
display: flex或float: left，并确保子项不换行（如加flex-wrap: nowrap） - 旧版 Sass（100 / 3 会得整数
33，必须写成#{100% / $i}或percentage(1 / $i)才得33.33333%
生成百分比宽度时，box-sizing 和容错值不能省
直接写 width: 25% 在真实项目里极易出问题：加上默认 border 或 padding 后，总宽超 100%，导致右侧栏掉行；Safari 下 flex-shrink 还可能压缩侧边栏。
实操建议：
- 全局加
* { box-sizing: border-box; }，让 padding/border 不影响 width 计算 - 宽度留 1px 容错：用
width: calc(25% - 1px)而非纯百分比，尤其在 float 布局中 - 若配合
gap使用（如 Flex/Grid），注意 gap 是额外间距，不占子项 width，无需在百分比里扣除
媒体查询里别用 SCSS 算“相对容器宽度”的百分比
有人试图写 $container-width: 1200px; .sidebar { width: percentage(240px / $container-width); }——这会报错或产出错误值。因为 CSS 中父容器宽度可能是 max-width: 1200px、100% 或由 flex 自适应决定，SCSS 编译时根本不知道运行时真实值。
正确做法是把百分比当配置项，而非计算结果：
- 定义断点变量：
$breakpoint-tablet: 48em;（用 em，适配字体缩放） - 桌面端写：
@media (min-width: $breakpoint-tablet) { .sidebar { width: 25%; } } - 平板端写：
@media (max-width: $breakpoint-tablet) { .sidebar { width: 100%; } } - 真要缩放响应式宽度，改用
clamp(180px, 25%, 280px)，让浏览器 runtime 决定，SCSS 只负责注入这个字符串
Grid 布局下，百分比宽度不如 minmax() + fr 可靠
虽然 grid-template-columns: 25% 75% 能工作，但一旦内容撑开、有滚动或嵌套，百分比容易失守。现代项目更推荐混合单位：
- 固定侧边栏 + 弹性主区：
grid-template-columns: 240px 1fr; - 带最小约束的弹性：
grid-template-columns: 240px minmax(300px, 1fr); - 全响应式（不依赖百分比）：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - 如果仍需百分比语义（比如设计稿要求“侧边栏占 20%”），优先用
clamp()替代静态百分比，避免小屏下过窄、大屏下留白
真正难的不是怎么写 @for，而是意识到：SCSS 的“动态”只发生在编译期，而布局的“动态”往往需要运行时参与——这时候该交棒给 CSS Grid、Flex 或 JS，而不是硬让 Sass 算它算不了的东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
