使用浮动方法和填充的子网格

Question

如何使用Singularity获得嵌套网格？ 我做了一个简单的网格，需要使用浮动方法的嵌套网格。

我的示例：http://sassmeister.com/gist/7326030

Answer 1

你应该理解两件事：

1. 奇点将相对宽度应用于列。
2. 它只是生成CSS，完全不知道你的HTML结构。

因此，如果您将一个浮点范围应用于一个类，它将获得width: 33%，例如。无论其嵌套如何，具有该类的每个元素都将具有width: 33%。这意味着您无法使用单级非语义类创建嵌套网格。您需要两个或更多级别：

• 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

还要注意两件事：

• 您不需要跨越第一级容器，它已经100％宽。
• 您应该非常小心嵌套网格中的固定边距。