Susy prefix, suffix, pad wrong output with gutter-position inside

Question

I don't know what is happening with the output of prefix, suffix and pad when using gutter-position: inside. For example:

$susy: (
    columns: 12,
    gutter-position: inside,
    global-box-sizing: border-box
);

body {
    @include pad(gutter());
}

The output is:

body {
  padding-left: 1.6666666667%;
  padding-right: 1.6666666667%;
}

And comparing with the squish mixin:

body {
  margin-left: 0.8333333333%;
  margin-right: 0.8333333333%;
}

The desired output is 0.8333333333% but pad still doesn't "split".

And they both together - locally should output the same value, but it doesn't:

body {
    @include pad(gutter());
    @include squish(gutter());
}

The output:

body {
  padding-left: 1.6666666667%;
  padding-right: 1.6666666667%;
  margin-left: 0.8333333333%;
  margin-right: 0.8333333333%;
}

What is happening?

score 1 · Accepted Answer · answered Oct 22 '15 at 23:50

These mixins are not meant for applying gutters (use @include gutter() or @include gutter(split) for that) — they are meant for additional margins and padding. In order to do that properly in most cases, they try maintain existing gutters in addition to any padding/margins you ask for. In your case, the gutters are being added to pad and not squish because your gutter-position is inside. You've asked for a gutter width, pad adds a gutter width, and you end up with double. If you want to use either of those mixins without having gutter widths included, use the no-gutters keyword (pad($width no-gutters)).

Susy prefix, suffix, pad wrong output with gutter-position inside

1 Answers1