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 之后的所有这些 with-layout 和上下文有什么意义? 如果 span 不从父元素读取上下文，那么 susy 到底有什么意义？）

Here's the result

Answer 1

如果全局设置，则不必将显式上下文传递给每个 container/span 元素 。 Susy（以及任何其他 Sass 插件）不知道 DOM，因此它不知道 #object1 在 #grid 中，它已设置为 [=13] =].

每个项目都需要来自某个地方的上下文。如果你没有显式地传递它，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 }

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

Div not confirming to grid. Defined an 8 column grid and elements are binding to 4 column. Susy

susy-compass

susy-sass

susy