Susy Next 内容源有序布局

Question

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

虽然这对于 strait CSS 来说是相当困难的，但我似乎无法在 Susy 中干净利落地做这件事，或者根本就没有。

这里需要注意的是，我不能在布局中添加任何额外的包装器，它只有四个 DIV 块并且必须这样。另一个需要注意的是，我真的更喜欢使用 Susy Next（我目前使用的是 alpha4）。

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

来源顺序为：

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 Next 的内部结构，并尝试直接调用 span() 函数来获取宽度，万岁这在我只需要 width: 值的情况下有效，但是......

...我正在做的margin-right: span(4 + $gutter) 边距值需要与 push 或 pre 将返回的值相同，但我不太了解它们如何工作的所有内部结构，我的“神奇浮动” " 0.75 计算 $gutter 时稍微不准确，它可能是正确的，但当然改变 set-grid 中的值并且它可能是错误的，所以它充其量只是一个粗略的猜测。

我需要的是一种获得与 pre 将返回的值相同的值的方法，但当然只是该值，或者只是一种更好的方法来完成整个事情:)

.region {

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

  &:nth-child(2) {
    $gutter: $gutters * .75;
    margin-right: span(4 + $gutter);
    width: span(4);
    float: right;
    clear: right;
  }

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

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

Answer 1

你是对的 - 在 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 选项允许您将元素定位在网格上的特定位置。

Answer 2

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

最后一部分是编写我自己的函数来返回我需要的 nth-child(2) div 的正确值，它需要一个 margin-right 来将它推回到正确的位置。复制 Susy pre mixin 的内部结构是显而易见的做法，并且成功了，万岁！

@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);

小问题 - 我知道 index 和 append 在做什么，但不是我不太确定 outer。

不是讨论的地方，但我想知道这种抽象是否对 Susy Next 有好处，而不是将相同/相似的逻辑烘焙到几个 mixin 中。我至少会受益:)

无论如何，这就是我现在解决这个问题的方法，我仍然很想听听 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);
  }
}