Fla*_*vio 3 html css sass susy-compass susy-sass
我使用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>
Run Code Online (Sandbox Code Playgroud)
我希望"新闻"占据一整行,"推特"占据这一行的一半而"博客"占据另一半.这两个"摘录"应占据"博客"栏目的一半.因此,我有以下scss:
.news {
@include container();
}
.tweet {
@include span(6);
}
.blog {
@include span(6 at 7);
}
.excerpt {
@include span(3 of 6);
}
Run Code Online (Sandbox Code Playgroud)
当然,第二段摘录现在也有一个正确的排水沟,这使它跳上一条新线.因此,我认为我会使用该last标志作为:last-childSusy提供的摘录,但这不起作用.右边的排水沟已经设置好了@include span(3 of 6),因此会留下来.唯一能解决问题的方法就是删除正确的边距:
.excerpt:last-child {
margin-right: 0;
}
Run Code Online (Sandbox Code Playgroud)
这有效,但我认为必须有另一种解决方案.在那儿?
我还没有尝试过Susy 2,所以请给我一个建议.使用旧版本的Susy,您可以使用omegamixin来指示最后一个元素.
在升级文档之后,这是他们对2.0版的建议:
// Susy 1.x
.old { @include nth-omega(last); }
// Susy 2.x
.new:last-child { @include omega; }
Run Code Online (Sandbox Code Playgroud)
更新
我意识到omega已被lastSusy 2.x 取代.
所以我认为你的问题的正确答案是
.excerpt:last-child { @include last; }
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3934 次 |
| 最近记录: |