susy-compass - 6 列网格中的 5 列

Question

我有一个 6 列的固定宽度网格，但我希望一个特定的“行”有 5 列，这可能吗？

@import "susy";
@include border-box-sizing;

// The 1000px grid
$total-columns: 6;
$column-width: 150px;
$gutter-width: 20px;
$grid-padding: 0;

$container-style: static;
$container-width: 1000px;

$show-grid-backgrounds  : true;

谢谢

Answer 1

当然是。所有 Susy 数学都简单地基于columns / context，因此您可以通过向 Susy 谎报上下文来获得任意数量的列。

$total-columns: 6;

.container {
  @include container;
  .tricky {
    @include span-columns(1,5); // tell Susy there are 5 columns, and suddenly there are.
  }
}

如果您想更诚实一点，或者将 5 作为更大代码块的默认上下文，您可以简单地将代码包装在该块中layout(5) { ... }或中。with-grid-settings(5) { ... }$total-columns == 5