1

これは確かにいくつかのコードで示すのが最も簡単です:

.container{
    .gallery {
        ul {
            @include clearfix;
        }
        li {
            @include span-columns(1,4);

            &:nth-child(4n) {
                @include omega;
            }
        }
    }

    @include at-breakpoint($large-columns) {
        .gallery {
            li {
                @include span-columns(1,3);

                &:nth-child(4n) {
                    @include remove-omega;
                }
                &:nth-child(3n) {
                    @include omega;
                }
            }
        }
    }
}

最初は 4 列で 4 番目がオメガで、次に 3 列に変更し、3 番目がオメガです。正しい要素は左右に正しくフロートされますが、4 番目ごとに間違った右マージンが取得されます...

私はこれを正しく行っていますか？むしろ、私は何を間違っていますか？

読んでくれてありがとう /アンディ

4

1 に答える 1

3

の値がわからないので、あなたの質問は誤解を招きます$large-columns。価値があるかもしれないと思い59em 3ましたが、それは完全に機能します。値が実際にはちょうどあるようです59em-これが問題を引き起こしています。

列数なしでブレークポイントを設定すると、Susy は設定に基づいて新しいコンテキストを計算し$column-widthます$gutter-width。span-columns(1,3)グローバル コンテキストを明示的なコンテキストでオーバーライドするため、問題は発生しません(3)。ただしremove-omega、(ガターを適用するために) コンテキストを知る必要もあり、コンテキストを渡さないため、グローバル コンテキストが使用されます。

次の 2 つのオプションがあります。

  1. ブレークポイントは次のように変更できます。at-breakpoint(59em 3)
  2. 明示的なコンテキストを渡すことができます: remove-omega(3).
于 2013-04-11T04:39:17.850 に答える