Div 未确认网格。定义了一个 8 列网格，元素绑定到 4 列。苏西

Question

我的 div 与我的网格不匹配。这是一个 8 容器网格，当我告诉元素 span(2) 时，它的行为就好像网格是 4。这是因为我没有在 $susy 中定义全局网格吗？

一些上下文代码：

首先我定义了一个容器网格：

 #grid{
        @include container(8);
        gutter-width: 5%;
       }

然后我将它添加到html中：

<main id="grid">...</div>

然后我将 div 嵌套在 css 中：

#object1{
    @extend %object;
    @include span(2);
    }

并将其添加到 html 中

<main id="grid">
   <div id="object1">a</div>
</main>

编辑：固定（即使在子元素中也必须定义上下文。这是为什么？如果我可以根据我想要的任何网格数量设置跨度，那么在 hokey pokey 之后所有这些布局和上下文的意义何在？如果span 不从父元素读取上下文，那么 susy 到底是什么意思？）

Here's the result

Answer 1

如果您在全局范围内设置，则不必将显式上下文传递给每个容器/跨度元素。。 Susy（和任何其他 Sass 插件）不知道 DOM，因此它不知道 #object1 位于已设置为 8 columns 的 #grid 中。

每个项目都需要来自某个地方的上下文。如果您没有明确传递它，Susy 会检查全局设置，默认为4 columns。如果您将全局设置更改为8，那么您不需要将上下文传递到您的混音中。 with-layout mixin 只是临时更改全局设置的一种方法，用于嵌套代码块。

.default {
  @include span(2); // uses global default of 4
}

$susy: layout(8);

.custom {
  @include span(2); // uses global setting of 8

  @include with-layout(4) {
    @include span(2); // uses temporary setting of 4
  }

  @include span(2); // uses global setting of 8 again
}