Проблемы с шириной желоба в Сьюзи

Question

У меня есть решетка из 24 сушей. Я пытаюсь сделать несколько ящиков, каждый из которых будет состоять из 6 столбцов (по 4 на строку), но я хочу добавить вокруг них несколько водостоков с более широким контейнером шириной 24 столбца. К сожалению, независимо от того, что я пытаюсь, я не могу заставить его работать. Кажется, колонки не регулируют ширину, чтобы разместить водосточные желоба ... Я думал, что Сьюзи должна была это сделать, нет? Я новичок во всем этом, поэтому я прочитал много статей и сообщений и не могу понять этот ответ, поэтому любая помощь, которую вы можете дать, очень ценится.

Вот код:

.solutionThumbnails { 
    @include span(24 no-gutters); 
    @include container; 
    @include clearfix; 
    li { 
    @include span(6); 
    @include gutters(8px after); 
    background: #666; 
    float: left; 
    height: 240px; 
    display: block; 
    &:nth-child(4) { 
     margin-right: 0px; 
    } 
    } 
} 

А вот что это прямо сейчас, глядя, как, игнорировать форматирование в противном случае, по-прежнему кодирование :) (вы увидите его стук четвертого пункта вниз): http://i.stack.imgur.com/5tmWp.jpg

Answer 1

Поскольку Сасс не знает о DOM, Сьюзи не знает, что ваши смесители span и gutter применяются к одному и тому же элементу или связаны каким-либо образом. Сьюзи будет обрабатывать математику, когда у нее будет вся информация. Я думаю, вы хотите something like this?

.solutionThumbnails { 
    @include container(24); 

    li { 
    @include gallery(6 of 24 split); 
    background: #666; 
    height: 240px; 
    } 
} 

Я не знаю ваших настроек, или много специфических особенностей о выходе вам нужно, но вы должны получить близко. Вам не нужно устанавливать span, container и clearfix на один и тот же элемент - mixer container обрабатывает все это. Аналогичным образом, gallery обрабатывает все, что вам нужно, для согласованного расположения элементов одинакового размера.

Мой пример не дает вам ровно 8px желобов. Единственный способ смешать статические (px) желоба с сеткой жидкости (%) - это перемещать желоба внутри элементов. Вы можете аппроксимировать желобы 8px с текучей средой, изменив соотношение сточных вод по мере необходимости. Соотношение по умолчанию: .25.