3

我使用 susy 制作了一个简单的 12 列网格。我想我或多或少已经弄清楚了，除了一件事。我有以下标记：

<div class="news">
    <div class="tweet">
        <p>the tweet<p/>
    </div>
    <div class="blog">
        <h3>Recent News</h3>
        <div class="excerpt">
            <p>the excerpt<p/>
        </div>
        <div class="excerpt">
            <p>the excerpt<p/>
        </div>                
    </div>
</div>

我希望“新闻”占据一整行，“推文”占据这一行的一半，“博客”占据另一半。这两个“摘录”应该占据“博客”栏的一半。因此，我有以下 scss：

.news {
    @include container();
}
.tweet {
    @include span(6);
}
.blog {
    @include span(6 at 7);
}
.excerpt {
    @include span(3 of 6);
}

当然，第二个摘录现在也有一个正确的排水沟，这使它跳到了一个新的行上。所以我想我会在 susy 提供的摘录中使用last标志，:last-child但这不起作用。正确的排水沟已经被设置，@include span(3 of 6)因此将保留。唯一能解决问题的是像这样删除右边距：

.excerpt:last-child {
    margin-right: 0;
}

这可行，但我认为必须有另一种解决方案。在那儿？

4

2 回答 2

6

我还没有尝试过 Susy 2，所以请采纳这个建议。使用旧版本的 Susy，您可以使用omegamixin 来指示最后一个元素。
按照升级文档，这是他们对 2.0 版的建议：

// Susy 1.x
.old { @include nth-omega(last); }

// Susy 2.x
.new:last-child { @include omega; }

资源

更新
我意识到在 Susy 2.x中omega已被替换。 所以我认为你的问题的正确答案是 last

.excerpt:last-child { @include last; }
于 2014-03-22T17:22:21.010 回答
2

您的 .tweet 和 .blog 不应该在 .news 下面缩进吗？那么你的 .excerpt 应该在 .blog 下面缩进。我想知道如果你有它是否可以工作：

.blog {@include span(last 6 of 12);}
    .excerpt {@include span(3 of 6);}

可能值得一试！

于 2014-03-22T17:13:22.150 回答