div未确认到网格。 定义了一个8列网格并将元素绑定到4列。 与Susy

Question

My div is not matching up to my grid. It's an 8 container grid and when I tell the element to span(2), it acts as if the grid were 4. Is this because I'm not defining a global grid in $susy?

Some contextual code:

First I defined a container grid:

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

Then I added it to the html:

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

Then I nested the div in css:

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

and added it to the html

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

edit: fixed (must define context even in child elements. why is that? if i can set span according to any grid amount that i want, then what's the point of all this with-layout and context following hokey pokey? If span doesn't read context from the parent element then what the hell is the point of susy?)

Here's the result

Answer 1

You don't have to pass the explicit context to every single container/span element if you set it globally . Susy (and any other Sass plugin) is not aware of the DOM, and so it is not aware that #object1 is inside #grid which has been set to 8 columns .

Every item needs context from somewhere. If you don't pass it in explicitly, Susy checks the global settings, which default to 4 columns . If you change the global setting to 8 , then you don't need to pass context into your mixins. The with-layout mixin is just one way to change the global setting temporarily, for a block of nested code.

.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
}