P
P
Paul Sh.2017-03-01 19:17:58
Sass
Paul Sh., 2017-03-01 19:17:58

Sass -> susy { gutter-position:?

Good day.
I stumbled across the Susy frame for Sass and ran into the gutter-position property. This property determines what will be the indentation between the columns and has several values. In general, the essence of the question:
Who uses what value? Initially, I rested on gutter-position: after , which simply adds margin-right to blocks, there are some gadgets and you need to remove it from the last element and all that, but working on bootstrap implies that this indent between blocks is made up by adjacent blocks, at the left block for example, this is margin-right (50%), and for the right neighbor, this is already margin-left (50%). This principle is more in line with gutter-position: split. The essence of the question for those who are already using Susy:
What gutter-position property do you use for your projects and if possible, briefly why this property?
Thank you.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
B
bob_cody, 2017-03-02
@shvaika

I use the gutter-position: after value and through :nth-child(xn) I remove the indent from the last element in the row using the last impurity. And then, if necessary for adaptability, I change the number of the last element in the row to :nth-child and write other column relationships:

.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;
  }
}

If you use gutter-position: split, then you don't have to think about :nth-child, but there will be padding on the left and right, which is not always needed. You can take them into account initially, but then there are conventions for the entire project.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question