如何整齐地显示Bourbon网格的列？

Question

在我的CSS文件中，如果显示应用的结果但不显示列，则应用Bourbon Neat和not show column In 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整列的背景属性。

Answer 1

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

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

新的可视网格反映了通过

-breakpoint()混合应用于网格的更改，只要在导入之前定义了媒体上下文。

您是否选择使用_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;

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