Question

我使用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);
}

当然，第二段摘录现在也有一个正确的排水沟，这使得它跳上一条新线。所以我想我会使用last标志来获取可能提供的摘录的:last-child，但这不起作用。右边的排水沟已由@include span(3 of 6)设定，因此将保留。唯一能解决问题的方法就是删除正确的边距：

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

这有效，但我认为必须有另一种解决方案。有吗？

Answer 1

我还没有尝试过Susy 2，所以请给我一个建议。使用旧版本的Susy，您有omega mixin来指示最后一个元素在升级文档之后，这是他们对2.0版的建议：

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

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

Source

<强>更新
我意识到，omega已被Susy 2.x中的last取代所以我认为你问题的正确答案是

.excerpt:last-child { @include last; }

Answer 2

你的.tweet和.blog不应缩进.news。然后你的.excerpt应缩进.blog下面。我想知道如果你有这个可能会有用：

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

值得一试！

如何使用susy有效删除最后一列的边距？

2 个答案: