即使指南显示 4 列，Bourbon Neat 仍然使用 12 列

Question

我正在构建的静态 Octopress 站点中使用 Bourbon 和 Neat。除了打开指南 ($visual-grid: true;) 之外，我使用的 _grid-settings.scss 文件没有任何变化。在我的 screen.scss 中，我在 Bourbon 之后、Neat 之前加载网格设置：

@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";

由于我使用的是默认网格设置，所以小屏幕应该只有 4 列宽。

$phone-portrait: new-breakpoint(max-width $tiny-screen 4); // 450px

当我在小于 450 像素的屏幕上查看网站时，视觉网格显示 4 列，但布局仍使用 12 列。我有几个地方在布局中使用 4 列 div，在移动设备上它们应该是全宽的，因为页面只有 4 列，但它们只有页面宽度的三分之一。我可以通过将 @include span-columns(4) 替换为 @include span-columns(12) 来验证移动设备仍在使用 12 列。 12 列 div 是唯一在移动设备上全宽的 div。

为什么 Neat 不为指南和我的布局使用相同数量的列？

Answer 1

我认为您的代码中缺少一个逗号，认为您需要：

$phone-portrait: new-breakpoint(max-width $tiny-screen, 4); // 450px

希望对您有所帮助

Answer 2

事实证明，问题是由于在更改列数 ($phone-portrait: new-breakpoint(max-width $tiny-screen 4);) 的断点内的 div 上没有使用 @include span-columns(4)。起初这似乎很奇怪，直到我明白到底发生了什么。当我将 div 设置为跨越 4 列时，neat 获取列数并 div 将它们除以当前断点处的总列数。在我的例子中，这将是 0.333，然后用作 div 的宽度百分比。问题是，这永远不会改变，即使后来改变的列总数做了一个断点。我的 div 总是 33.3% 宽。我需要做的是在断点的媒体选择器中重复 span-columns 包含，如下所示：

$phone-portrait: new-breakpoint(max-width $tiny-screen 4);

.my-div {
  @include span-columns(4);
}

@include media($phone-portrait) { 
    .my-div {
      @include span-columns(4);
    }
}

这确保我的 div 将在 $phone-portrait 断点上 100% 宽。

即使指南显示 4 列，Bourbon Neat 仍然使用 12 列

Bourbon Neat still using 12 columns even when guides show 4 columns

ruby

sass

neat

bourbon