0

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:

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%;
}

何が起こっている？

4

1 に答える 1

1

これらの mixin はガターを適用するためのものではありません (使用@include gutter()またはその@include gutter(split)ために) — これらは、追加のマージンとパディングを目的としています。ほとんどの場合、それを適切に行うために、必要なパディング/マージンに加えて、既存のガターを維持しようとします。あなたの場合pad、squishあなたgutter-positionがinside. ガター幅を要求し、ガター幅をpad追加すると、2 倍になります。ガター幅を含めずにこれらの mixin のいずれかを使用する場合は、no-guttersキーワード ( pad($width no-gutters)) を使用します。

于 2015-10-22T23:50:31.607 に答える