css - 使用 susy compass 插件如何正确地为每个元素添加边距？

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 间隙（如果您愿意，可以留出余量）。

如果您使用以下方法实现 susy 网格背景：

$show-grid-backgrounds : true;

在您的容器上下文中：

@include susy-grid-background;

你会看到你的设计背后的排水沟。

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

我使用的另一种方法是 squish mixin，它将列添加为边距。这很好用，但我没有尝试使用 0.5 列作为压缩量。