如何显示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

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

发件人https://github.com/thoughtbot/neat#using-整洁：

视觉网格反映通过new-breakpoint（）mixin，只要定义了媒体上下文在导入Neat之前。

是否选择使用_grid-settings.scss文件（按照文档建议）取决于您自己。但是，为了查看视觉网格，您肯定需要在导入neat之前设置$visual-grid: true;。为了使可视化网格具有响应性，您还需要在导入neat之前定义断点。

Answer 2

不幸的是，仅仅在容器中添加"$visual grid:true；"是行不通的。或者至少它对我不起作用。然而，在文件中添加具有以下设置的"_getting-settings.scs"文件对我起作用：

$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.5;

文档不太清楚$visualgridL应该放在哪里，所以很难说这是否是开发人员想要的。我认为他们需要在这种情况下提供更好的例子。

Answer 3

在容器中，您需要添加

  $visual-grid: true;

这应该显示用于调试的网格列背景。

Answer 4

1. 制作如下文件（根据自己的要求调整设置）。此文件覆盖中的整洁默认设置neat的设置目录中的_visual-grid.scss

2. 将导入添加到您刚刚创建的文件中，行Before（之后将不起作用）将主整洁文件导入到您的主项目SCSS文件中。

_neatsettings.scs

// Neat Settings
$visual-grid: true;
$visual-grid-color: #faa;
$visual-grid-index: front;