如何更改我的默认 Foundation 5 网格使用的列数？答案

【问题标题】：How to change the number of columns my default Foundation 5 grid uses?如何更改我的默认 Foundation 5 网格使用的列数？
【发布时间】：2015-03-26 05:10:16
【问题描述】：

例如，我想将我的 Foundation 5 网格使用的默认列数从 12 更改为 24。我在这里看到了 F5 网格文档页面

https://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html

但是确实没有详细的说明。我看到的是这样的：

使用 Sass 进行自定义 使用 Sass 自定义网格很容易 _settings.scss 文件中提供的变量。

SCSS

$row-width: rem-calc(1000); $column-gutter: rem-calc(30); $total-columns: 12 ;

当我取消注释 $total-columns: 12 ; 并将其更改为 $total-columns: 24 ; 时，绝对没有任何反应。再一次，我在这里没有看到真正详细的说明，所以我不知道我是否做对了。那么更改我的默认 Foundation 5 网格使用的列数的正确方法是什么？

【问题讨论】：

我假设您在进行更改之后重新编译您的 Sass，对吧？
当然是通过 grunt libsass
你确定你的 _settings.scss 部分被包含了吗？
我认为它没有被包括在内，因为如果是这样，我会看到更改显示，但我没有。我认为我的 Gruntfile.js 中的 Foundation 组件路径有些奇怪。我意识到我可能应该发布一个关于此的新问题。

标签： css sass zurb-foundation zurb-foundation-5

【解决方案1】：

如果您使用 compass 或 grunt 运行 watch 任务，您将在保存时在命令行中看到编译运行。

如果您已经构建了一个 12 列的网格，然后更改为 24 列，您会看到第一组列向左浮动，其余列向右浮动，在中间留下一个很大的间隙。

    // $row-width: rem-calc(1000);
    $total-columns: 24;
    // $column-gutter: rem-calc(30);

【讨论】：

对，但就像我说的，当我更改值并重新编译 scss 时，浏览器中没有任何变化。这就像_settings.scss 文件甚至没有被看到。我应该为此开一个新问题。