Question

使用prefix时，我不知道suffix，pad和gutter-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%;
}

与squish mixin比较：

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

所需的输出为0.8333333333%，但pad仍然没有＆＃34;拆分＆＃34;。

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

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)） - 它们用于其他边距和填充。为了在大多数情况下正确地执行此操作，除了您要求的任何填充/边距之外，他们还会尝试维护现有的装订线。在您的情况下，由于您的pad为squish，排水沟将添加到gutter-position而非inside。你已经要求有一个沟槽宽度，pad增加了一个沟槽宽度，你最终得到了两倍。如果您想在不包含装订线宽度的情况下使用其中任何一种混音，请使用no-gutters关键字（pad($width no-gutters)）。

Susy前缀，后缀，填充错误输出，内部有天沟位置

1 个答案: