如何将 Susy 装订线宽度设置为超过 1 列答案

【问题标题】：How to set Susy gutter width to be more than 1 column如何将 Susy 装订线宽度设置为超过 1 列
【发布时间】：2015-07-08 14:36:17
【问题描述】：

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

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

比如@include with-layout(24 2col-gutter) { ... }

【问题讨论】：

标签： susy susy-sass

【解决方案1】：

我意识到，如果您希望装订线是列宽的倍数（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

【讨论】：

【解决方案2】：

你可以试试：

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

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

如果您想要更多或更少的排水沟空间，请更改排水沟的数量。

【讨论】：

这似乎没有将装订线设置为 2 列。我认为它仍然是 1 列的比率。也许是 2/4 这么半列？
你可以在这里看到Sassmeister
我不太确定那个号码在做什么。 12 将保证金设置为 4%，但如果将其增加到 200，则保证金为 4.32526%。这似乎没有关联，所以我试图弄清楚这个数字的实际含义。