必须重新声明全球背景？

Question

我确定我错过了一些明显的东西......似乎我不得不重新声明我的某些元素的上下文。我在全局变量中声明了以下内容：

// General breakpoints
$bp1: 500px;
$bp2: 700px;
$bp3: 900px;
$bp4: 1100px;

// Grids and gutters
$grids: 3;
$grids: add-grid(6 at $bp1);
$grids: add-grid(12 at $bp3);

当我尝试将一个元素放在我的页脚中时，除非我声明了可选的上下文变量，否则它将无法工作，例如。

footer .block-webform {
    @include grid-span(8, 5, 12);
}

如果没有最后一个值，该元素不会显示我将其放在全局网格上的位置。 （当然，这是宽度> 900px。）我想我只需要指定上下文，如果我试图从全局更改它。

我在全球背景声明中遗漏了什么吗？

提前感谢您的帮助！

ST

Answer 1

我在这个问题上挣扎（并且仍然在苦苦挣扎），因为在制作嵌套网格时，我想知道同样的事情（即为什么我必须继续绕过全局网格上下文？）。我发现的是，当仅使用grid-span时，您需要始终跟踪并传递子网格的网格上下文。看看这个例子：

Singularity nested columns using grid-span

它只使用grid-span来创建容器和嵌套网格，并且由于我有嵌套网格/上下文，我必须不断地将第三个参数传递给grid-span当前网格数以指示哪个我所在的容器/上下文。这看起来就像你已经发现的那样。

然而，正如Singularity wiki（由于我没有足够的声誉点而无法发布链接，但可以在子标题“Context Overrides”下找到）所讨论的那样，有一个{{1}我相信这有助于mixin。现在看到与上面相同的示例，但使用layout mixin创建嵌套网格：

Singularity nested columns using layout+grid-span

在这个例子中我使用layout mixin来创建一个新的网格上下文，当我想要一个嵌套的网格/子网格/等..在layout mixin layout mixins中使用任何grid-span集合，从而消除了跟踪网格数量的需要，并将其作为第三个参数传递给layout。

希望这会有所帮助，因为我自己努力了一段时间，并且最近才能使用grid-span mixin复制嵌套网格。当然，我对Singularity / SASS /等很新。所以我不会推荐这些例子作为最佳实践或任何事情。或许专家可以提供额外的细节吗？

祝你好运。

Answer 2

如果页脚使用的是与其前一个不同的上下文（网格总数），则必须声明新上下文（网格数）。因此，您必须告诉它网格的数量，从哪个网格开始，以及总网格，正如您所做的那样。