0

すべての要素が正確に 1 列にまたがる場合、Susy は(指定せずに) 複数列のレイアウトを自動的にomega埋めることができますか?

私が欲しいもの:

+---------+---------+
| I       | want    |
+---------+---------+
| two     | columns |
+---------+---------+

私が得るもの（以下のコード）：

+---------+
| I       |
+---------+
| want    |
+---------+
| two     |
+---------+
| columns |
+---------+

HTML:

<div id="container">
  <div>I</div>
  <div>want</div>
  <div>two</div>
  <div>columns!</div>
</div>

SCSS:

@import 'susy';

$total-columns: 2;
$column-width: 200px;
$gutter-width: 5px;
$grid-padding: 10px;

#container {
    @include container;
    @include susy-grid-background;

    &>div {
        @include span-columns(1);
        height: 50px;
    }
}
4

1 に答える 1

1

いいえ。omega を指定する必要があります。指定しないと、Susy がマークアップと目的の結果について多くのことを想定しなければならなくなるからです。私たちはそれを何としても避けようとします。これを解決する最善の方法は、nth-omega()mixin を使用することです。

div {
  @include span-columns(1);
  @include nth-omega(even);
}

これはセレクターの単純な拡張であり:nth-child()、同じキーワード、数値、またはアルゴリズムを使用します。

于 2013-01-22T03:02:17.483 に答える