我查看了Singularity的文档，似乎推荐使用多个网格的方法是使用布局mixin，但我的方法却不同。
当我说多个网格时，我指的是不同页面部分具有不同列数的页面，具有相同的媒体查询。
我的问题是，我一直在我的容器中重用@include add-grid()来使用多个网格，这是一种可接受的方式来使用sngularitygs吗？我没有找到以这种方式使用它的例子，但它看起来效果很好。
.container {
@include add-grid(16);
}
我只看到用于设置全局网格的添加网格，如上所述使用它在容器内添加另一个网格是不明智的吗？ 我也在容器中打开bg网格来显示嵌套网格。
.container {
@include sgs-change('debug', true);
@include add-grid(16);
@include background-grid();
}
它似乎非常适合在容器中可视化网格，但我发现在文档中没有以这种方式使用这些mixin，这是错误的原因还是有更好的方法？ 感谢。
答案 0 :(得分：0)
奇点在某些内部变量中存储网格属性。
每当您使用add-grid()时，此变量都会使用新的网格属性进行更新。
如果您使用add-grid()一次，则下面调用的所有Singularity跨越mixin将使用该定义。
再次使用add-grid()会发生什么？它不会影响上面的代码。但是下面的代码将使用网格的新定义。
因此，有两种使用add-grid()的策略：
add-grid() ，然后再调用mixing中的Singularity。这将确保每个mixin使用适当的网格定义。后者可能不是一种预期的做事方式，但如果您有多个网格可供使用，则您没有其他选择。
我在古老的Singularity 1.1上广泛使用这种方法。但它在那里要简单得多：存储网格属性的变量是公开的，可以轻松透明地覆盖。我不确定现代版Singularity的缺点。特定媒体查询的网格定义可能会保留未设置状态并导致问题。要深入挖掘。
好吧，我似乎已经弄清楚了。
Singularity 1.2将其设置存储在$singularity地图中。它使用sgs-get()和sgs-set()函数来访问这些设置。功能的有趣之处在于，您无法在某处分配值，因此您无法使用它们：
sgs-set('foo', 'bar')
您必须将函数的结果分配给虚拟变量，即使您不打算在任何地方重复使用该函数：
$dummy: sgs-set('foo', 'bar')
网格和装订线存储在'grids'地图的'gutters'和$singularity键下。因此，为了在同一页面上混合多个网格，您必须重置这些网格。
幸运的是，sgs-reset()存在于函数和mixin形式中。
因此，在声明不同的网格之前，您必须重置现有网格：
+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
请注意，如果您在项目中使用重置网格的方法，则必须在项目的任何位置使用它。如果您未在每次生成之前应用重置，则可能会产生无法预测的结果。
那是因为你不再拥有一个标准的站点范围网格，你必须告诉Singularity你每次要求Singularity跨越任何东西时使用哪个网格。
另一方面，一旦您重新设置网格，就不再需要定义媒体查询感知网格。我发现这是一种解脱。管理复杂网格层次结构的可能性可能会令人讨厌。
.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
如果您执行大量缩略图网格而不是页面布局，则可以节省更多时间。这是一个mixin，它为给定数量的列生成缩略图网格（仅适用于对称网格）：
=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
最后，您可以将此循环混合放在一个循环中以生成响应式缩略图网格。这是一个利用Breakpoint Slicer的例子，这是断点的语法糖：
=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