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>

edit: fixed (должен определять контекст даже в дочерних элементах. почему это так? если я могу установить span в соответствии с любым количеством сетки, которое я хочу, то какой смысл всего этого с-layout и context после hokey pokey? если span notn ' t читать контекст из родительского элемента, тогда что, черт возьми, является причиной susy?)

Вот результат

Answer 1

Вам не нужно передавать явный контекст каждому отдельному элементу контейнера / диапазона, если вы устанавливаете его глобально. Сьюзи (и любой другой плагин Sass) не знает о DOM, и поэтому не знает, что #object1 это внутри #grid который был установлен в 8 columns,

Каждому предмету нужен контекст откуда-то. Если вы не передаете это явно, Сьюзи проверяет глобальные настройки, которые по умолчанию 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
}