0

Singularity でネストされたグリッドを取得するにはどうすればよいですか? シンプルなグリッドを作成しましたが、フローティング メソッドでネストされたグリッドが必要です。

私のサンプル: http://sassmeister.com/gist/7326030

4

1 に答える 1

1

次の 2 つのことを理解する必要があります。

  1. Singularity は列に相対的な幅を適用します。
  2. HTML 構造をまったく意識せずに、CSS を生成するだけです。

したがって、float スパンをクラスに適用するとwidth: 33%、たとえば が取得されます。そのクラスを持つすべての要素にwidth: 33%は、ネストに関係なく があります。これは、単一レベルの非セマンティック クラスでネストされたグリッドを作成できないことを意味します。2 つ以上のレベルが必要です。

  • span1、span2、span3...
  • grid1-span1, grid1-span2, grid1-span3... grid2-span1, grid2-span2, grid2-span3...

これにより、CSS が肥大化します。そのため、環境でセマンティック アプローチの使用が許可されている場合は、非セマンティック アプローチを使用しないでください (Sass ではほとんど労力をかけずに使用できます)。

構造：

#page
  #foo.container
    .subcontainer
      .column Foo
    .subcontainer
      .column Bar

  #bar.container
    .column Baz
    .column Quux

スタイル:

$grids: 12
$gutters: 0.2

#foo
  .subcontainer
    +float-span(6)
    &:nth-child(2n)
      +float-span(6, last)
  .column
    +layout(6)
      +float-span(3)
      &:nth-child(2n)
        +float-span(3, last)

#bar
  .column
    +float-span(6)
    &:nth-child(2n)
      +float-span(6, last)

デモ: http://sassmeister.com/gist/7360259

また、次の 2 つの点にも注意してください。

  • 第 1 レベルのコンテナーにまたがる必要はありません。既に 100% 幅になっています。
  • ネストされたグリッドの固定マージンには十分注意する必要があります。
于 2013-11-07T19:23:39.837 に答える