如何让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

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

版本：

指南针1.0.1 Susy 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在给定元素之前添加任意数量的列（或任意跨度）作为边距 - 从原来的位置推送它。