使用 SASS/Susy 推拉答案

【问题标题】：Push and Pull with SASS/Susy使用 SASS/Susy 推拉
【发布时间】：2015-09-10 11:43:42
【问题描述】：

我有一个三个 div 布局，想将它们放在一行中：

主要 |除了 |盒子

main {@include span (8 of 17);
aside {@include span (4 at 9 of 17);
.box {@include span (2 at 13 of 17) @include pull(2);

我没有让 .box 在其自身和旁边留出空间。使用上面的代码，.box 将被放置在 main 上。没有

@include pull(2)

它将被直接放置在右边。有什么建议吗？

【问题讨论】：

我还在 .box- div 上测试了不同的 float-right。也推（2）。
要么我不明白这个问题，要么我无法重现它。这是一个有效的demo on SassMeister。我不确定你为什么需要推或拉最后一个。还要注意at x 语法仅适用于isolation 输出，它从流中提取元素，并将它们定位在左边缘。我不推荐它，除非在非常特殊的情况下。在你的情况下，那一点没有做任何事情。
@EricMSuzanne 感谢您抽出宝贵时间。你的演示非常好。但不是我想要的。我希望 Box div 位于位置 15、16、17 和 box 和 side 之间的 2 个“空”列。

标签： sass susy

【解决方案1】：

pull mixin 将负左边距添加到元素，将其拉到左边。 push mixin 增加了正的左边距，把它推到右边。但是在这种情况下，您可以将元素浮动到右侧，这就是添加 last 关键字时发生的情况。你想要做的是跨越 17 列中的最后 3 列，所以在这种情况下，你可以这样写：

.box { @include span(last 3 of 17); }

【讨论】：