• Sass -> susy { gutter-position:?

    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, но появятся отступы слева и справа, которые не всегда нужны. Можно их учитывать изначально, но тогда появляются условности для всего проекта.
    Ответ написан
    2 комментария