Префикс Susy, суффикс, неправильный вывод дополнить положением желоба внутри

Я не знаю, что происходит с выводом 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%;
}

Что происходит?


css susy-sass susy libsass
person Mireba    schedule 20.10.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Эти примеси не предназначены для применения отступов (используйте для этого @include gutter() или @include gutter(split)) — они предназначены для дополнительных полей и отступов. Чтобы сделать это должным образом, в большинстве случаев они пытаются поддерживать существующие промежутки в дополнение к любым отступам/полям, которые вы запрашиваете. В вашем случае желоба добавляются к pad, а не к squish, потому что ваш gutter-position равен inside. Вы запросили ширину желоба, pad добавляет ширину желоба, и в итоге вы получаете двойную. Если вы хотите использовать любой из этих миксинов без указания ширины желоба, используйте ключевое слово no-gutters (pad($width no-gutters)).

person Miriam Suzanne    schedule 22.10.2015