css - Susy前缀，后缀，填充错误的输出，里面有gutter-position

Question

我不知道在使用 gutter-position 时 prefix、suffix 和 pad 的输出发生了什么:里面。例如:

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

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

输出是:

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

并与 squish mixin 进行比较:

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

期望的输出是 0.8333333333% 但 pad 仍然没有“ split ”。

而且它们一起 - 本地应该输出相同的值，但事实并非如此:

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

这些 mixins 不是为了应用装订线(为此使用 @include gutter() 或 @include gutter(split))——它们是为了 额外的边距和填充。为了在大多数情况下正确地做到这一点，他们尝试维护现有的排水沟除了您要求的任何填充/边距。在你的情况下，排水沟被添加到 pad 而不是 squish 因为你的 gutter-position 是 inside。您已经请求了一个装订线宽度，pad 添加了一个装订线宽度，您最终得到了两倍。如果您想在不包含装订线宽度的情况下使用这些混音中的任何一个，请使用 no-gutters 关键字 (pad($width no-gutters))。