基础 6.2 大天沟尺寸答案

【问题标题】：Foundation 6.2 Large Gutter Size基础 6.2 大天沟尺寸
【发布时间】：2016-04-05 02:24:46
【问题描述】：

根据 Foundation 6.2 文档，默认网格间距大小为 small 为 20px，medium 为 30px，但未提及 large。 large 的默认装订线尺寸是多少？

【问题讨论】：

标签： html css zurb-foundation zurb-foundation-6

【解决方案1】：

查看 Foundation GitHub 页面上的 _grid.scss：

/// The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.
/// @type Map | Length
/// @since 6.1.0
$grid-column-gutter: (
  small: 20px,
  medium: 30px,
) !default;

和_column.scss:

// Gutters
  @if type-of($gutter) == 'map' {
    @each $breakpoint, $value in $gutter {
      $padding: rem-calc($value) / 2;

      @include breakpoint($breakpoint) {
        padding-left: $padding;
        padding-right: $padding;
      }
    }
  }

没有像文档所说的那样定义大排水沟。因此在这种情况下，大排水沟与中排水沟相同，因为 Foundation 首先使用移动设备。

您可以通过执行以下操作添加自定义大排水沟：

$grid-column-gutter: (
  small: 20px,
  medium: 30px,
  large: 50px
) !default;

【讨论】：

我更改了 $grid-column-gutter 设置但似乎没有效果？
@TwitterBootstrap 我刚刚在本地对其进行了测试，它似乎对我有用。你有没有运行gulp build 将 sass 重新编译成 css？或者可能是一个更夸张的值（例如 200px 的大真的很突出哈哈）
我正在运行 Foundation 手表并制作了中号 90 像素。
嗯，有没有报错？我只是在 _grid.scss 文件中更改了它，您是在其他地方更改它吗？
您不应该覆盖源 Foundation 文件，仅供参考。它有!default 标志是有原因的。您应该使用新数据重新定义变量。