Div не подтверждает сетку. Определена сетка из 8 столбцов, а элементы привязаны к 4 столбцам. Сьюзи

Мой 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>

редактировать: исправлено (должен определять контекст даже в дочерних элементах. Почему это? Если я могу установить диапазон в соответствии с любой величиной сетки, которую я хочу, то какой смысл во всем этом с макетом и контекстом, следующим за хоки-поки? Если диапазон не Если вы не читаете контекст из родительского элемента, то какой, черт возьми, смысл susy?)

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


susy-compass susy-sass susy
person Andrew    schedule 28.05.2015    source источник
comment
Миксин container() принимает ширину в качестве (необязательного) аргумента, а не количество столбцов – ср. документация.   -  person BlueM    schedule 28.05.2015
comment
Спасибо за помощь! :D   -  person Andrew    schedule 28.05.2015

Ответы (1)


arrow_upward
1
arrow_downward

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

Каждому элементу нужен контекст откуда-то. Если вы не передадите его явно, Susy проверит глобальные настройки, которые по умолчанию равны 4 columns. Если вы измените глобальную настройку на 8, вам не нужно будет передавать контекст в ваши примеси. Миксин with-layout — это всего лишь один из способов временно изменить глобальную настройку для блока вложенного кода.

.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
}
person Miriam Suzanne    schedule 28.05.2015
comment
Спасибо, Эрик, ты молодец! Я помню, как читал о DOM. Думаю, не утонул. Я начинающий разработчик. Я также ценю вашу контекстуализацию with-layout. Отличная работа, которую вы проделали с этим вашим проектом. Это образцово. - person Andrew; 28.05.2015