使用susy指南针插件如何正确地为每个元素添加边距？

Question

我有4个宽度设置为@include span-columns(3,12)的元素，它将每个元素输出为25％，这很好，我还想做的是为每个元素添加边距但是这样做会打破这些元素的布局25％的宽度和％边距加在一起。任何人都可以建议我如何将边距与宽度结合起来？

SCSS

    .m-info-col{

      .col{
        @include span-columns(3,12);
// tried this margin-right: columns(.5,12);

        &:last-child{
          @include omega;
        }
      }
    }

Answer 1

如果你的容器设置了12列并且已经将$ gutter-width设置为一个值，那么每列都有$ gutter-width gap（如果你愿意的话，还有余量）。

如果使用以下方法实现可疑网格背景：

$show-grid-backgrounds : true;

并在容器上下文中：

@include susy-grid-background;

您将看到设计背后的排水沟。

您还可以在span-columns mixin（第3个参数）中添加填充。但这并不总是按预期工作。

我使用的另一种方法是挤压mixin并添加列作为边距。这很有效，但我没有尝试使用0.5列作为挤压量。