css - 如何显示 Bourbon Neat 网格的列？

Question

在我的 CSS 文件中应用 Bourbon Neat 的命令并且在 html 文件中不显示列，如果显示应用的结果但不显示列。

.container{
    @include outer-container;
    @include span-columns(2 of 8, table);
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    width: 960px;
}

当显示为 sass 生成的 css 时，不显示 Bourbon Neat 列的背景属性。

Answer 1

重要的是同时设置 $visual-grid: true; 并在你的行之前定义你的断点 @import "neat";

来自 https://github.com/thoughtbot/neat#using-neat :

The visual grid reflects the changes applied to the grid via the new-breakpoint() mixin, as long as the media contexts are defined before importing Neat.

是否选择使用 _grid-settings.scss 文件(如文档推荐的那样)取决于您。但是为了完全看到视觉网格，您肯定需要在导入 neat 之前设置 $visual-grid: true;。为了使视觉网格能够响应，您还需要在导入 neat 之前定义断点。