3

単純な 12 列のグリッドを作成するために susy を使用しています。1つのことを除いて、多かれ少なかれ理解できたと思います。次のマークアップがあります。

<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>

「ニュース」が行全体を占め、「つぶやき」がこの行の半分を占め、「ブログ」が残りの半分を占めるようにします。2 つの「抜粋」は、「ブログ」列の半分を占めるはずです。したがって、次のscssがあります。

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

もちろん、2 番目の抜粋にも右ガターがあり、新しい行にジャンプします。そのため、 susy が提供する抜粋のlastフラグを使用すると考えましたが、これは機能しません。:last-child右のガターは によってすでに設定されている@include span(3 of 6)ため、残ります。トリックを行う唯一のことは、次のように右マージンを削除することです。

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

これは機能しますが、別の解決策が必要だと思います。ある？

4

2 に答える 2

6

Susy 2 はまだ試していないので、これを参考にしてください。古いバージョンの Susyomegaでは、最後の要素を示すために mixin がありました。
アップグレードのドキュメントに続いて、これはバージョン 2.0 に対して彼らが提案するものです:

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

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

ソース

更新Susy 2.x で置き換えられた
ことに気付きました。 したがって、あなたの質問に対する正しい答えは omegalast

.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 に答える