6

Susy を使用する場合、行の最後の項目に「オメガ」フラグを付けて、そのmargin-right. たとえば、12 列のグリッドに配置する必要があるアイテムがたくさんあるとします。

<div class="item">...</div>
<div class="item">...</div>
<div class="item">I'm the last of the row</div>
<div class="item">...</div>

そしてSCSS：

.item{
  @include span-columns(4);
  @include nth-omega(3n);
}

しかし、私たちのグリッドはレスポンシブで、小さいディスプレイでは 8 列のグリッドを使用しています。問題は、 ではなくomegaに表示する必要があることです。2n3n

<div class="item">...</div>
<div class="item">I'm the last of the row</div>
<div class="item">...</div>
<div class="item">...</div>

私の質問は次のとおりです。スージーでは、ブレークポイントごとに列を再定義する必要がありますか、それとも列幅を一度だけ定義してomega自然に適切な場所に配置する方法はありますか?

そうでない場合、それを提供する他のグリッド システムはありますか?

4

2 に答える 2

1

あなたの場合、新しいブレークポイントで列 (コンテキスト) の総数を再定義する必要があります。に関しては、2 番目の呼び出しを明示的に呼び出す前に最初の呼び出しを無効にするためにnth-omega使用できますが、CSS コードの臭い (プロパティを中和する必要がある) と考えられるため、それを回避するためにメディアクエリ分割を使用することをお勧めします。@include remove-nth-omega(3n)

また、自動的にそれを行うことができるフレームワークも知りません。

于 2013-04-08T01:47:47.223 に答える