如何通过Sass动态生成CSS网格列宽_使用Percentage函数精确计算-css教程-PHP中文网

直接用%写网格列宽会出错，因sass中%是取模运算符而非百分比单位，且css百分比依赖容器宽度；应使用percentage()函数传入小数转换，如percentage(0.2)→20%。

如何通过sass动态生成css网格列宽_使用percentage函数精确计算

为什么直接用 `%` 写网格列宽会出错

很多人写 grid-template-columns: 20% 30% 50% 看似合理，但实际在 grid 中，百分比列宽是相对于网格容器宽度计算的——而如果容器本身没有明确宽度（比如 width: 100% 或固定值），或者父级是 flex 容器、绝对定位等场景，% 就会失效或表现异常。更关键的是：Sass 的 % 运算符是取模（modulo），不是百分比单位，20% 30% 会被解析成 “20 除以 30 的余数”，直接报错。

用 Sass 的 `percentage()` 函数生成合法 CSS 百分比值

percentage() 是 Sass 内置函数，作用是把小数转为带 % 单位的 CSS 值，比如 percentage(0.2) → 20%。它不参与运行时计算，只在编译期转换，所以安全、可预测。

常见误用：percentage(20) 错——它会变成 2000%；正确写法必须传小数：

@function grid-col($fraction) {
  @return percentage($fraction);
}

.grid-3-4-5 {
  grid-template-columns: grid-col(3/12) grid-col(4/12) grid-col(5/12);
}
// 编译后 → grid-template-columns: 25% 33.33333% 41.66667%;

分母用总列数（如 12）保证加起来是 100%，避免四舍五入误差累积
避免用 1/3 这类浮点精度不稳定的分数，改用 4/12 更可控
不要在 percentage() 外再加 %，否则变成 25%%，CSS 解析失败

动态生成多组网格列配置的实用封装

手写每组比例太累，用 Sass 列表 + @each + percentage() 批量生成：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

$grid-presets: (
  "fluid-2": (1, 1),
  "sidebar-main": (1, 3),
  "header-nav-main": (2, 1, 9)
);

@each $name, $ratios in $grid-presets {
  .grid-#{$name} {
    $total: math.sum($ratios...);
    $cols: ();
    @each $r in $ratios {
      $cols: append($cols, percentage($r / $total), comma);
    }
    grid-template-columns: #{$cols};
  }
}

注意点：