1

Singularity のドキュメントを見てきましたが、複数のグリッドを持つ推奨される方法は、レイアウト ミックスインを使用することですが、私は別の方法で行っています。

複数のグリッドと言うとき、同じメディア クエリを使用して、ページ セクションごとに列数が異なるページを指しています。

私の質問は、@include add-grid()複数のグリッドを使用するためにコンテナーで再利用してきましたが、それは sngularitygs を使用する許容される方法ですか? このように使用した例は見つかりませんでしたが、非常にうまく機能しているようです。

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

グローバル グリッドを設定するために使用される add-grid しか表示されませんが、上記のようにコンテナ内に別のグリッドを追加するために使用するのは賢明ではありませんか? また、ネストされたグリッドを視覚化するために、コンテナーで bg グリッドをオンにしています。

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

コンテナ内のグリッドを視覚化するのにうまく機能しているようですが、ドキュメントではこれらの mixin をこのように使用していません。何らかの理由でこれが間違っているか、より良い方法がありますか? ありがとう。

4

1 に答える 1

0

Singularity stores grid properties in some internal variable.

Whenever you use add-grid(), this variable is updated with new grid properties.

If you use add-grid() once, all Singularity spanning mixins called below will use that definition.

What happens when you use add-grid() again? It will not affect the code above. But the code below will use the new definition of the grid.

Thus, there are two strategies of using add-grid():

  1. Use it once to set one definition all the time.
  2. If you need different grids, use add-grid() every time before calling a Singularity spanning mixin. This will ensure that each mixin uses an appropriate grid definition.

The latter is probably not an intended way of doing things, but if you've got multiple grids to work with, you've got no other option.

I'm using this approach extensively on the good old Singularity 1.1. But it's much simpler there: the variable that stores grid properties is exposed and can be easily and transparently overridden. I'm not sure about the drawbacks of this with the modern version of Singularity. Grid definitions for specific media-queries may stay unresetted and cause trouble. Gotta dig deeper.

UPD1 2014-06-18

Okay, i seem to have figured it out.

How Singularity stores its settings

Singularity 1.2 stores its settings in the $singularity map. It uses the sgs-get() and sgs-set() functions to access those settings. The funny thing with functions is that you can't use them withough assigning a value somewhere, so you can't do:

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

You have to assign the result of the function to a dummy variable, even if you're not going to reuse that anywhere:

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

How to manually reassign grid definitions

Grids and gutters are stored under 'grids' and 'gutters' keys of the $singularity map. So in order to mix multiple grids on the same page you have to reset those.

Luckily, there is sgs-reset() that exists both in function and mixin forms.

So before declaring a different grid, you have to reset existing grid:

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

A custom mixin to quickly reassign grids

That is a fair amount of work. You can make it easier with a custom mixin:

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

Here's a usage example:

.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)

Resulting CSS: http://sassmeister.com/gist/21249a9dabf745f892cb

Note that if you use the approach of resetting your grids once in your project, you HAVE to use it everywhere in your project. If you don't apply reset prior to every spanning, you might have unpredictable results.

That's because you no longer have a standard site-wide grid and you have to tell Singularity which grid you mean to use every time you ask Singularity to span anything.

Manually using that mixin inside media queries instead of maintaining a complex grid definition

On the other hand, once you're resetting your grids all the time, you no longer need to define media query-aware grids. I find this to be a relief. Managing the consitency of a complex grids hierarchy can be a nuisance.

.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)

Resulting CSS: http://sassmeister.com/gist/19f8ad9dab904cfcabba

A custom mixin to quickly span a thumbnail grid

You can save yourself even more time if you're doing a lot of thumbnail grids, as opposed to page layouts. Here's a mixin that generates a thumbnail grid for a given number of columns (works with symmetrical grids only):

=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

Demo: http://sassmeister.com/gist/62f44e02a2fbb3bd4296

A custom mixin to set up a responsive thumbnail grid with a snap of fingers

Finally, you can put this looping mixin in a one more loop to generate responsive thumbnail grids. Here's an example leveraging Breakpoint Slicer, a syntactic sugar for 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)

A single call of this mixin results in a full-fledged responsive thumbnail grid!

.column
  +responsive-span

Demo: http://sassmeister.com/gist/acef490deb922535ef19

于 2014-06-09T18:24:27.500 に答える