UPD1 2014-06-18

Question

我查看了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，这是错误的原因还是有更好的方法？感谢。

Answer 1

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

每当您使用add-grid()时，此变量都会使用新的网格属性进行更新。

如果您使用add-grid()一次，则下面调用的所有Singularity跨越mixin将使用该定义。

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

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

使用它一次设置一个定义。
如果您需要不同的网格，请在每次时间使用add-grid() ，然后再调用mixing中的Singularity。这将确保每个mixin使用适当的网格定义。

后者可能不是一种预期的做事方式，但如果您有多个网格可供使用，则您没有其他选择。

我在古老的Singularity 1.1上广泛使用这种方法。但它在那里要简单得多：存储网格属性的变量是公开的，可以轻松透明地覆盖。我不确定现代版Singularity的缺点。特定媒体查询的网格定义可能会保留未设置状态并导致问题。要深入挖掘。

UPD1 2014-06-18

好吧，我似乎已经弄清楚了。

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以快速重新分配网格

这是相当多的工作。您可以使用自定义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跨越任何东西时使用哪个网格。

在媒体查询中手动使用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

自定义mixin以快速跨越缩略图网格

如果您执行大量缩略图网格而不是页面布局，则可以节省更多时间。这是一个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

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

具有奇点的多个网格定义

1 个答案:

UPD1 2014-06-18

Singularity如何存储其设置

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

自定义mixin以快速重新分配网格

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

自定义mixin以快速跨越缩略图网格

使用手指按钮设置自适应缩略图网格的自定义混合