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

Question

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

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

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

在那里我改变了 large: 从 1200px 到 1560px 并改变了其他断点。

这里我也改了$global-width

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

None 其中似乎有任何效果。我确保它包含在我的 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 6SASS 中更改最大宽度或 rows/breakpoints

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

$testcolor: #523432;

并在 base/colors 的其他地方使用它

* { border: 1px solid $testcolor;}

而且效果很好。

Answer 1

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

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

How to change the maximum row width in Foundation 6 with SASS

zurb-foundation

zurb-foundation-6