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

Question

我不知道在使用 gutter-position: inside 时 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

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

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

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

css

susy-sass

libsass

susy