Question

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

一些上下文代码：

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

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

然后我把它添加到html：

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

然后我在css中嵌套了div：

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

并将其添加到html

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

编辑：修复（必须在子元素中定义上下文。为什么会这样？如果我可以根据我想要的任何网格数量设置跨度，那么所有这些与布局和上下文关注的重点是什么hokey pokey？如果span没有从父元素中读取上下文，那么到底是什么意思呢？）

Here's the result

Answer 1

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

每个项目都需要来自某个地方的上下文。如果您未明确传递，则Susy会检查全局设置，默认为4 columns。如果将全局设置更改为8，则无需将上下文传递到mixins中。对于一组嵌套代码，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 }

不确认电网。定义了8列网格，元素绑定到4列。与Susy

1 个答案: