Zen grids生成的元素太大

Question

我在将zen-grid集成到drupal时遇到了问题。我已经安装了sass和指南针，并使用它们。然后，我创建了一个包含3个字段的内容类型。这就给了我这样的html结构：

<article class="node-1 node node-layout1 node-promoted view-mode-full clearfix" typeof="sioc:Item foaf:Document" about="/node/1">

   <div class="field field-name-field-topleft field-type-text-long field-label-above">
   <div class="field field-name-field-topmid field-type-text-long field-label-above">
   <div class="field field-name-field-topright field-type-text-long field-label-above">
</article>

然后我尝试使用禅宗网格来创建这样的布局：

topleft___________topmid_______________topright

所以我使用了这个代码：

$zen-column-count: 5; // Set the total number of columns in the grid.
.node-layout1{
   max-width:1200px;
  @include zen-grid-container; // Apply this mixin to the container.
}
.field-name-field-topleft {
  @include zen-grid-item(2, 1);
}
.field-name-field-topmid {
  @include zen-grid-item(1, 2);
}
.field-name-field-topright {
  @include zen-grid-item(2, 3);
}

所有的工作都还可以，我得到了所有3个元素，但是它们的宽度和偏移量太大了，topmid从topright应该结束的地方开始，所以我的页面在那之后太大了。

这是我从compass为所有3个元素生成的css：

.field-name-field-topleft {
float: left;
margin-left: 0;
margin-right: -200%;
width: 200%;
}
.field-name-field-topmid {
float: left;
margin-left: 100%;
margin-right: -200%;
width: 100%;
}
.field-name-field-topright {
float: left;
margin-left: 200%;
margin-right: -400%;
width: 200%;
}

我发现问题出在

$zen-column-count: 5;

没有申请，它在开始时设置为1，似乎我无法更改它。

Answer 1

这听起来像是指南针1.0的问题，如下所示：

https://github.com/JohnAlbin/zen-grids/issues/68

一个修复方法是将$zen-float-direction，$zen-column-count添加到您的zen-grid-item调用中。

@include zen-grid-item(2, 1, $zen-float-direction, $zen-column-count);

Answer 2

在“$zen--count: 5”末尾使用！global count为我修复它。看起来你必须强制zen使用新的变量。

$zen-column-count: 5 !global;

https://www.drupal.org/node/2346291#comment-9475791