Sass -> susy { gutter-position:?

Question

[Pavel Sh.]

Доброго времени суток.
Вцепился в изучение фрейма Susy для Sass и столкнулся со свойством gutter-position. Это свойство определяет какими будут отступы между колонками и имеет несколько значений. В целом суть вопроса:
Кто, какое значение использует? Изначально я упирался в gutter-position: after что добавляет просто к блокам margin-right, там свои примочки и нужно удалять его у последнего элемента и все такое, но работа на bootstrap подразумевает, что этот отступ между блоками составляется соседними блоками, у левого блока к примеру это margin-right(50%), а у правого соседа, это уже margin-left(50%). Данному принципу больше соответствует gutter-position: split. Суть вопроса для тех кто уже использует Susy:
Каким свойством gutter-position вы пользуетесь для своих проектов и если можно в кратце почему именно это свойство?

Спасибо.

Answer 1

[bob_cody]

Я использую значение gutter-position: after и через :nth-child(xn) у последнего элемента в ряду убираю отступ с помощью примеси last. А далее, если нужно для адаптивности, изменяю номер последнего в ряду элемента в :nth-child и пишу другие отношения колонок:

.column {
  @media (min-width: 800px) and (max-width: 1199px) {
    @include span(4 of 12);

    &:nth-child(3n) {
      @include last;
    }
  }
  
  @media (min-width: 500px) and (max-width: 799px) {
    @include span(6 of 12);

    &:nth-child(2n) {
      @include last;
    }
  }
  
  @media (min-width: 0) and (max-width: 499px) {
    @include full;
  }
}

Если использовать gutter-position: split, то можно не думать об :nth-child, но появятся отступы слева и справа, которые не всегда нужны. Можно их учитывать изначально, но тогда появляются условности для всего проекта.

Comments

[Pavel Sh.]

Спасибо. Я пока остановился на gutter-position: split и вот мой первый проект на susy www.weblistok.com.ua/op5

:)

[bob_cody]

Отличное начало!