1

我查看了 Singularity 的文档，似乎推荐的拥有多个网格的方法是使用 layout 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，这是错误的原因还是有更好的方法？谢谢。

4

1 回答 1

0

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

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

如果你使用add-grid()一次，下面调用的所有 Singularity spanning mixin 都将使用该定义。

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

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

  1. 使用一次即可始终设置一个定义。
  2. 如果您需要不同的网格，请在调用 Singularity spanning mixin 之前add-grid() 每次使用。这将确保每个 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

一个自定义的 mixin，只需弹指间即可设置响应式缩略图网格

最后，您可以将这个循环混合放在一个循环中以生成响应式缩略图网格。这是一个利用Breakpoint Slicer的示例，它是 Breakpoint 的语法糖：

=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

于 2014-06-09T18:24:27.500 回答