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

Question

如何使用奇点获得嵌套网格？我制作了一个简单的网格，需要带有浮动方法的嵌套网格。

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