singularitygs - 具有浮动方法和填充的子网格

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% 宽。
• 您应该非常小心嵌套网格中的固定边距。