使用 Susy 2 对嵌套元素进行适当的填充

Question

我正在尝试使用 Susy 2 构建一个简单的嵌套布局：具有两列（子列）的容器，每个子列包含副本和两个嵌套列（孙列）。

我注意到孙子列有自己的装订线，因此它们的内容与父列的装订线不一致。

理想情况下，孙子元素（及其背景颜色）将扩展到子元素的全宽。

实现这一目标的最佳方法是什么？

要旨： https://gist.github.com/andreimoment/2a734aa4a0e99b2866e9

HTML：

<div class="parent">
  <div class="child">
    <p>child 1</p>
    <div class="grandchild">Grandchild 1</div>
    <div class="grandchild last">Grandchild 2</div>
  </div>  
  <div class="child last">child 2</div>  
</div>

社会保障体系：

@import "compass";
@import "susy";

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

$susy: (
  columns: 12,
  column-width: 4em,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position:inside,
  global-box-sizing: border-box,
  debug: (
    image: show,
    color: rgba(200,100,100,.3),
    output: overlay,
    toggle: top right,
  ),
);

.parent {
  @include container();
  @include show-grid(background);
  padding:0;
  @include clearfix;
  }

.child {
  background-color: rgba(100,100,200, 0.5);
  @include span(first 6 of 12);
  &.last {
    @include span(last 6 of 12);
  }
}

.grandchild {
  background-color: rgba(100,100,200, 0.5);
  @include span(first 3 of 6);
  &.last {
    @include span(last 3 of 6);
  }
}

Answer 1

使用 nest 关键字告诉 Susy 一个跨度有子代。这仅需要与 inside 和 split 排水沟 - 您正在使用的排水沟。

@include span(first 6 of 12 nest);

您还可以使用 no-gutters 任何时候你希望 Susy 不输出排水沟 - 但是 nest 在这种情况下，语义上更清晰。

笔记：你也不需要使用 first 和 inside 或者 split 排水沟。你不 需要 last 两者都可以，但它可以帮助解决一些子像素舍入问题。这些不会伤害任何东西，但你可以扔掉它们而不会造成损坏。