Question

我正在尝试将最大行宽从1200px更改为1560px，但无论如何我都无法找到这样做。我正在使用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;}

这很好用。

Answer 1

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

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

1 个答案: