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?
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)
).