sass - 如何使 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

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

版本:

compass 1.0.1 苏西2.1.3

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

Answer 1

如果您使用isolation，at 关键字只能用于放置元素。这是因为位置取决于上下文——项目相对于其他项目 float ——而 Susy 无法知道周围有什么其他项目。隔离通过将每个元素定位在左边缘之外来解决这个问题。因此，一种选择是使用 +span(1 at 2 of 3isolate)。

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

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

push mixin 在给定元素之前添加任意数量的列(或任意范围)作为边距 - 将其从原来的位置推送。