如何使用 SASS 更改 Foundation 6 中的最大行宽答案

【问题标题】：How to change the maximum row width in Foundation 6 with SASS如何使用 SASS 更改 Foundation 6 中的最大行宽
【发布时间】：2016-10-31 22:18:57
【问题描述】：

我正在尝试将最大行宽从 1200 像素更改为 1560 像素，但是无论如何我都找不到这样做的方法。我正在使用 SASS 进行编译。我假设只需要在 settings.scss 文件中更改设置，但是我所做的任何更改似乎对行宽没有影响。

我在这里看到了一个断点变量

$breakpoints: (
  small: 0,
  medium: 1200px,
  large: 1560px,
  xlarge: 1440px,
  xxlarge: 1440px,
);

在那里我改变了很多：从 1200px 到 1560px 并改变了其他断点。

我这里也改了$global-width

$global-width: rem-calc(1560);

这些似乎都没有任何效果。我确保它包含在我的 main.scss 文件中。

@import "vendors/foundation/settings";
@import "base/colors";
@import "base/global";
@import "base/typography";

我的文件夹结构是

-_main.scss
   -base
       -_colors.scss
       -_global.scss
       -_typography.scss
   -vendors
       -foundation
           -_settings.scss

我还仔细检查了所有其他 scss 文件的效果都运行良好。我没有收到任何错误。

更新：我还确保设置导入发生在我的基础基础包含之后

@import '../bower_components/foundation-sites/scss/util/util';
@import '../bower_components/foundation-sites/scss/foundation.scss';
@include foundation-global-styles;
@include foundation-grid;

所有都发生在我的其余导入之前。

如何在 Foundation 6 中更改 SASS 中的最大宽度或行/断点

更新：我还添加了一个测试变量

$testcolor: #523432;

并在其他地方以基础/颜色使用它

* { border: 1px solid $testcolor;}

而且效果很好。

【问题讨论】：

标签： zurb-foundation zurb-foundation-6

【解决方案1】：

原来这与我导入的订单有关。 _settings.scss 文件需要在基础 _foundation.scss 文件之前导入。

【讨论】：