Question

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

虽然这是一个相当紧张的海峡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（）函数来获取宽度，这很有用，我只需要宽度值：但是......

...我正在做margin-right: span(4 + $gutter)，保证金权利价值必须与推或预回报的价值相同，但我不能完全理解他们如何运作的所有内部因素，我的“计算$ gutter的.75的魔法浮点数是如此略微不准确，它可能是正确的，但当然会改变设定网格中的值而且它可能是错误的，所以它最好是粗略猜测。

我需要的是一种获得与之前相同的价值的方法，但当然只是价值或者只是整个事情的更好的方式：）

.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中完全有可能甚至不是很难下一个：

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

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

不是讨论的地方，但我想知道这个抽象是否适合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);
  }
}

Susy下一个内容源有序布局

更新1。

解决方案的一些想法？

2 个答案: