Question

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

.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：

可视网格反映了通过网格应用于网格的更改 new-breakpoint（）mixin，只要定义了媒体上下文之前导入Neat。

您是否选择使用_grid-settings.scss文件（正如文档推荐的那样）取决于您。但是为了看到视觉网格你肯定需要在导入整齐之前设置$visual-grid: true;。为了使视觉网格具有响应性，您还需要在导入整齐之前定义断点。

Answer 2

不幸的是，只需添加“$ visual-grid：true;”在容器中将无法正常工作。或者至少它对我不起作用。但是，在文件中添加带有以下设置的“_getting-settings.scss”文件对我有用：

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

文档不太清楚$ visual-gridL应该去哪里，因此很难判断这是否与开发人员的意图一致。我认为他们需要在这种情况下提供更好的例子。

Answer 3

在容器中，您需要添加

  $visual-grid: true;

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

Answer 4

制作如下文件（根据您自己的要求调整设置）。 此文件将覆盖其中的简洁默认设置在整洁的设置目录中_visual-grid.scss。
向您刚刚创建的文件添加导入之前（之后将无效）您将主要整洁文件导入主项目SCSS文件。

<强> _neatsettings.scss

// Neat Settings

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

如何显示Bourbon Neat网格的列？

4 个答案: