css - Susy 前缀、后缀、用 gutter-position 填充错误的输出

Question

我不知道 的输出prefix和使用时suffix发生了什么。例如：padgutter-position: inside

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

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

输出是：

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

并与squishmixin 进行比较：

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

所需的输出是0.8333333333%但pad仍然没有“分裂”。

他们都在一起 - 本地应该输出相同的值，但它不会：

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

输出：

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

怎么了？

Answer 1

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