0

我的 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 之后所有这些布局和上下文的意义何在？如果跨度没有t 从父元素中读取上下文，那么 susy 到底有什么意义？）

这是结果

4

1 回答 1

1

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

每个项目都需要来自某个地方的上下文。如果您没有明确传递它，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
}
于 2015-05-28T07:07:53.640 回答