如何让 Susy Sass 位置正常工作并将元素与中心列对齐

Question

我有一个三列网格，使用+span 函数可以很好地定义列。因此，如果我想要一个元素跨越一列，我会这样做：

+span(1 of 3)

还有两个：

+span(2 of 3)

等等。

我现在想要一个元素跨越一列但在位置 2，即在中间列。

Susy 文档说使用 at 关键字来指定位置，如下所示：

+span(1 at 2 of 3)

但是，这不起作用，我的列位于第一个位置，即左侧。

生成的 css：

width: 30.303030303%;
float: left;
margin-left: 1.5151515152%;
margin-right: 1.5151515152%;

当我这样做时

+span(1 at 3 of 3)

生成的 css：

width: 30.303030303%;
float: right;
margin-left: 1.5151515152%;
margin-right: 1.5151515152%;

这工作正常，我的专栏在第三位。

如何使该位置正常工作以使我的列位于位置二？

一些图片来帮助解释：

在第一栏：

在第 3 列：

我想要什么：

最后一个示例是通过以下方式实现的：

float: none
margin: 0 auto

我认为这是一个 hack，这也意味着高度现在是错误的，因为没有浮动。我认为这不是你应该与 Susy 合作的方式。

版本：

指南针 1.0.1 苏西2.1.3

我使用的是 .sass 文件，而不是 .scss

Answer 1

at 关键字仅在您使用 isolation 时才用于放置元素。这是因为位置取决于上下文——项目相对于其他项目浮动——而 Susy 无法知道周围有哪些其他项目。隔离通过将每个元素定位在左边缘来解决这个问题。所以一种选择是使用+span(1 at 2 of 3 isolate)。

不过，这不一定是最佳选择。为了简单地将元素移动到不同的位置，我会使用 push 和 pull mixins。

+span(1 of 3)
+push(1)

push mixin 在给定元素之前添加任意数量的列（或任意跨度）作为边距 - 将其从原本的位置推入。