css - Susy：susy-grid-background 总是显示 12 列，无论 $total-cols 否

Question

来自 Susy 文档：http ://susy.oddbird.net/guides/reference/#ref-grid-background

SUSY 网格背景
将 Susy 网格显示为任何容器上的背景图像。

// susy-grid-background(); .page { @include susy-grid-background; }

如果您将元素用作容器，则需要为元素应用背景以使此网格背景正确调整大小。

我的CSS片段：

$total-cols     : 16;
$column-width   : 4em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;

html { background: #fff no-repeat left top; }    

.standard {
  @include container; 
  @include susy-grid-background; /* Susy */

在我的 Haml 中：

%body.standard

无论我尝试过什么，网格总是显示 12 列。有人会好心地指出我需要去让这个调试工具工作的方向吗？

苏西 (1.0.rc.1) 指南针 (0.13.alpha.0)

Answer 1

如果您有一些断点，您还需要直接解决这些问题以更改$susy-grid-background显示的列数：

.page {
  @include container ($total-columns, $break1, $break2);

  @include susy-grid-background;

  @include at-breakpoint($break1)  {
    @include susy-grid-background;
  }
  @include at-breakpoint($break2)  {
    @include susy-grid-background;    
  }
}  

Answer 2

$total-cols应该叫$total-columns。该变量的名称在 1.0 中更改。默认设置是 12 列，您实际上并没有在任何地方覆盖它。