shvaika
@shvaika
Front-end developer

Sass -> susy { gutter-position:?

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

Спасибо.
  • Вопрос задан
  • 175 просмотров
Решения вопроса 1
bob_cody
@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, но появятся отступы слева и справа, которые не всегда нужны. Можно их учитывать изначально, но тогда появляются условности для всего проекта.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы