如何显示Bourbon Neat网格的列？

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:

只要在导入Neat 之前定义了媒体上下文,可视网格就会反映通过new-breakpoint()mixin应用于网格的更改 .

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

这应该显示网格列背景以供调试。