我看过Singularity的文档，似乎建议使用布局混合元素来创建多个网格，但我的做法有所不同。

当我说多个网格时，我指的是在同一媒体查询中，不同页面部分的列数不同的页面。

我的问题是，我一直在重复使用容器中的@include add-grid()来使用多个网格，这是一种可以接受的使用snregularitygs的方式吗？我没有找到这样使用它的例子，但它似乎运行得很好。

.container {
    @include add-grid(16);
}

我只看到添加网格用于设置全局网格，如上所述使用它在容器中添加另一个网格是不明智的吗？我还打开了容器中的bg网格来可视化嵌套的网格。

.container {
    @include sgs-change('debug', true);
    @include add-grid(16);
    @include background-grid();
}

它似乎非常适合在容器中可视化网格，但我在文档中没有看到这些混合元素以这种方式使用，这是错误的原因吗？或者有更好的方法吗？谢谢

奇点将网格属性存储在某个内部变量中。

无论何时使用add-grid()，都会使用新的栅格属性更新此变量。

如果您使用add-grid()一次，下面调用的所有奇点生成混合体都将使用该定义。

当您再次使用add-grid()时会发生什么？它不会影响上面的代码。但是下面的代码将使用网格的新定义。

因此，使用add-grid()有两种策略：

使用一次可以始终设置一个定义
如果需要不同的网格，请在调用奇异性生成混合之前，每隔使用一次add-grid()。这将确保每个mixin使用适当的网格定义

后者可能不是一种既定的做事方式，但如果你有多个网格可供使用，你就别无选择了。

我在老的奇点1.1上广泛使用了这种方法。但这里要简单得多：存储网格属性的变量是公开的，可以轻松透明地重写。我不确定现代版奇点的缺点。特定媒体查询的网格定义可能会保持未设置状态，并造成问题。必须深入挖掘。

更新1 2014-06-18

好吧，我似乎已经想通了。

奇点如何存储其设置

奇点1.2将其设置存储在$singularity映射中。它使用sgs-get()和sgs-set()函数来访问这些设置。函数的有趣之处在于，如果不在某个地方赋值，就不能使用它们，所以你不能这样做：

sgs-set('foo', 'bar')

你必须将函数的结果分配给一个伪变量，即使你不打算在任何地方重用它：

$dummy: sgs-set('foo', 'bar')

如何手动重新分配网格定义

栅格和檐沟存储在$singularity映射的'grids'和'gutters'键下。因此，为了在同一页面上混合多个网格，您必须重置这些网格。

幸运的是，sgs-reset()同时以函数和混合形式存在。

因此，在声明不同的网格之前，您必须重置现有网格：

+sgs-reset(grids)
+sgs-reset(gutters)
+add-grid(2 4 2)
+add-gutter(0.2)

用于快速重新分配网格的自定义混合

这是相当多的工作。您可以使用自定义的mixin:让它变得更容易

=reset-grid($grid: 2, $gutter: 0.1)
  +sgs-reset(grids)
  +sgs-reset(gutters)
  +add-grid($grid)
  +add-gutter($gutter)

下面是一个用法示例：

.container-1
  +reset-grid()
  #foo
    +grid-span(1,1)
  #bar
    +grid-span(1,2)
.container-2
  +reset-grid(1 3 2, 0.2)
  #baz
    +grid-span(1,1)
  #quux
    +grid-span(2,2)

生成的CSS：http://sassmeister.com/gist/21249a9dabf745f892cb

请注意，如果您在项目中使用一次重置网格的方法，那么您必须在项目中的任何地方都使用它。如果不在每次生成之前应用重置，则可能会产生不可预测的结果

这是因为你不再有一个标准的站点范围的网格，每次你要求奇点跨越任何东西时，你都必须告诉奇点你想要使用哪个网格。

在媒体查询中手动使用该mixin，而不是维护复杂的网格定义

另一方面，一旦您一直在重置网格，就不再需要定义媒体查询感知网格。我觉得这是一种解脱。管理复杂网格层次结构的一致性可能会很麻烦。

.container-1
  +reset-grid()
  #foo
    +grid-span(1,1)
  #bar
    +grid-span(1,2)
  +breakpoint(700px)
    +reset-grid(3, 0.2)
    #foo
      +grid-span(2,1)
    #bar
      +grid-span(1,2)

生成的CSS：http://sassmeister.com/gist/19f8ad9dab904cfcabba

用于快速跨越缩略图网格的自定义混合

如果你做了很多缩略图网格，而不是页面布局，你可以节省更多的时间。以下是一个为给定列数生成缩略图网格的混合(仅适用于对称网格(：

=quick-span($cols, $guts: 0.1, $pseudoclass: child, $center-last-row: 20, $proportional-margins: true)
  +reset-grid($cols, $guts)
  @for $i from 1 through $cols
    &:nth-#{$pseudoclass}(#{$cols}n+#{$i})
      +float-span(1, $i)
      @if $i == 1
        clear: both
    @if $proportional-margins
      &:nth-last-#{$pseudoclass}(#{$i})
        margin-bottom: 0
  @if $proportional-margins
    margin-bottom: $guts / ( $cols + ($cols - 1) * $guts) * 100%
  // Centering the last row
  @if $center-last-row and $cols < $center-last-row
    @for $i from 1 through $center-last-row
      $remainder: $i % $cols
      &:nth-#{$pseudoclass}(#{$i - $remainder + 1}):nth-last-child(#{$remainder})
        margin-left: grid-span(1, 1) * ($cols - $remainder) / 2

演示：http://sassmeister.com/gist/62f44e02a2fbb3bd4296

一个自定义的mixin，可以用手指快速设置响应缩略图网格

最后，您可以将这个循环混合放入一个循环中，以生成响应缩略图网格。下面是一个利用Breakpoint:的语法糖BreakpointSlicer的例子

=responsive-span($start-cols: 1, $start-slice: 1, $guts: 0.1)
  @for $i from 1 through (total-slices() - $start-slice + 1)
    $slice: $start-slice + $i - 1
    $cols: $start-cols + $i - 1
    +at($slice)
      +quick-span($cols, $guts)

这个mixin的一次调用就产生了一个完全响应的缩略图网格！

.column
  +responsive-span

演示：http://sassmeister.com/gist/acef490deb922535ef19

具有奇异性的多个网格定义