Css Susy下一个内容源有序布局

我在理解如何使用SusyNext生成以下布局时遇到了一些问题

虽然这是相当海峡前进海峡CSS我似乎不能让我的头周围做干净在苏西，或在所有真的

这里需要注意的是，我不能在布局中添加任何额外的包装，它只有四个DIV块，必须如此。另一个警告是，我真的更愿意在下一步使用Susy（我现在使用的是alpha4）

真的有点希望我只是没有看到树木的树木，因为我只使用了苏西几个星期

来源顺序为：

first
second
third
fourth

所需布局为：

    -----------------------------------------
   |  fourth    |           first            |
   |             ----------------------------
   |            |    second   |     third    |
    -----------------------------------------

更新1。 更新为了添加我当前的CSS解决方案，为了完整性，我在页面上添加了标记和所有生效的CSS：

<main>
  <div class="container">
    <div class="region region-first"></div>
    <div class="region region-second"></div>
    <div class="region region-third"></div>
    <div class="region region-fourth"></div>
  </div>
</main>

.container {
  *zoom: 1;
  max-width: 73.75em;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.25em;
}
.container:after {
  content: "";
  display: table;
  clear: both;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

main .region:first-child {
  width: 66.1016949%;
  float: right;
}
main .region:nth-child(2) {
  clear: right;
  float: right;
  margin-right: 33.8983051%;
  width: 32.2033898%;
}
main .region:nth-child(3) {
  margin-right: -66.1016949%;
  width: 32.2033898%;
  float: right;
}
main .region:last-child {
  width: 32.2033898%;
  margin: 0;
}

---

我会回答我自己的问题。你需要通读最初的问题，为什么这是一个答案——本质上，它归结为是工作的正确工具。我试图使用Susy mixin（最初）解决我的问题，但是转向Susy函数帮助我找到了解决方案

最后一部分是编写我自己的函数来返回第n个子（2）div所需的正确值，它需要一个边距权来将其推回到正确的位置。复制Susy预混合蛋白的内部结构是这里显而易见的行动方针，而且成功了，万岁

@function elf-margin-value(
  $span,
  $columns
) {
  $this: $span, $columns;
  $value: if(index($this, outer), $this, append($this, outer));
  @return span($value);
}

因此，在我的代码中，我可以这样使用它：

margin-right: elf-margin-value(4, 12);

小问题-我知道索引和附加在做什么，但我不太确定外部

这不是讨论的地方，但我想知道这种抽象是否适合Susy Next，而不是将相同/相似的逻辑烘焙成几个混合体。我至少会受益：）

无论如何，这就是我现在解决这个问题的方法，我仍然非常有兴趣听听Eric对此是否有一些建议，以及我的解决方案是否可以做得更容易/更好

到目前为止，解决办法如下：

$to: to($flow);
.region {

  &:first-child {
    @include span(8 omega of 12);
  }

  &:nth-child(2) {
    margin-#{$to}: elf-margin-value(4, 12);
    width: span(4);
    float: $to;
    clear: $to;
  }

  &:nth-child(3) {
    margin-#{$to}: - span(8);
    width: span(4);
    float: $to;
  }

  &:last-child {
    width: span(4);
  }
}

---

你说得对-这完全有可能，而且在Susy Next中也不难：

.region {
  &:first-child { @include span(last 8); }
  &:nth-child(2) {
    clear: right;
    @include span(4 at 5 isolate);
  }
  &:nth-child(3) { @include span(last 4 isolate); }
  &:last-child { width: span(4); }
}

---

isolation

选项允许您将元素定位在网格上的特定位置。

我认为这在CSS中实际上并不直接。我从未见过没有复杂度、高度或JS的情况下完成它。使用Susy，您可以在CSS中执行任何操作。如果您向我展示一个CSS解决方案，我将向您展示如何使用Susy创建它。：）纯CSS不可能满足您的要求。这只能通过浮点完成，并且源顺序必须为4、1、2、3。Flexbox可以让你重新排序，但你根本无法得到这个布局（一行4和1，下一行2和3）。哇，伙计们，好吧，我更新了我的帖子，加入了我手工制作的CSS和标记，以原型布局-你是对的，也许它没有那么简单：）@cimmanon，是的，这是可能的，也许我解释得不对，我试着添加了一张图片，但我还没有足够的街头信誉：）如果你愿意，我可以拍一张浏览器的截图，然后把它贴到某个地方，我发现很难解释我的意思，我的ascii艺术也不太好。是的！这是聪明的埃里克，完全打开了我的眼睛苏西下一步，我可以和应该如何使用它。非常感谢您抽出时间回答我的问题，非常感谢。

.region {
  &:first-child { @include span(last 8); }
  &:nth-child(2) {
    clear: right;
    @include span(4 at 5 isolate);
  }
  &:nth-child(3) { @include span(last 4 isolate); }
  &:last-child { width: span(4); }
}