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

Question

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

+span(1 of 3)

和两个：

+span(2 of 3)

ETC..

我现在想要一个元素跨越一列，但在位置 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和pullmixins。

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

mixin在push给定元素之前添加任意数量的列（或任意跨度）作为边距——从它本来应该在的位置推动它。