如何将 Susy 装订线宽度设置为大于 1 列

Question

我正在使用 with-layout 临时设置我的页面列结构的默认值。我需要一个 24 列的网格来进行更精细的控制，但需要一个大于 1 列的装订线。这可能吗？

@include with-layout(24) {
    .col-1 {
        @include span(17);
    }
    .col-2 {
        @include span(7);
    }
}

所以像 @include with-layout(24 2col-gutter) { ... }

Answer 1

你可以试试：

$my-layout: (
  columns: 24,
  gutters: 2,
);

@include with-layout($my-layout) {
  .col-1 {
      @include span(17);
  }
 .col-2 {
     @include span(last 7);
 }
}

如果你想要更多或更少的装订线-space改变装订线的数量。

Answer 2

我意识到，如果您希望装订线是列宽的倍数（1 col、2 col 等），那么您可以只使用 pre 和 push 选项。

在我的例子中，我实际上希望装订线的宽度是柱子宽度的两倍，所以效果很好。

$susy: (
  columns: 24,
  gutters: 0
);

.col-1 {
  @include span(17);
}

.col-2 {
  @include span(5);
}

.col-1 + .col-2 {
  @include pre(2);
}

Demo

如何将 Susy 装订线宽度设置为大于 1 列

How to set Susy gutter width to be more than 1 column

susy-sass

susy