-1

Singularity でまだ達成できていないことが 1 つあります。現時点では、フロートから分離出力スタイルに切り替えて、グリッドと分離スパンを使用しようとしています。しかし、再現できないパターンが 1 つあります。もっとエレガントな方法があるかどうかはわかりません。フロート出力の場合、これまでに次の設定を使用しました。

<div class="floater">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'float';

.floater div
{
  background-color:red;
  height:10em;
  @include float-span(4);
  &:nth-child(4n) {
      @include float-span(4, 'last');
  }
}

同じ幅の 4 つのボックスが隣り合わせに並んでいます。しかし、アイソレーションスパン/アイソレーション出力で同じことを達成する方法。私が試したら

<div class="isolator">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'isolation';

.isolator div
{
  background-blue;
  height:10em;
  @include isolation-span(4, 1, 'right', $gutter: .25);
  &:nth-child(4n) {
        @include isolation-span(4, 13, 'right', $gutter: .25);
  }
}

「列」ごとに n 番目の子と分離スパンを含める必要がありますか (float の例の n 番目の子では、最初と最後のボックスのみが表示されます)。または、上記のフロートの例のような短い方法はありますか? よろしくラルフ

4

1 に答える 1

1

項目ごとに書き出す必要があります。isolationoutput メソッドは、項目をグリッドの列位置に慎重に配置します。技術的に言えば、float出力メソッドで行っていることは、実際には結合さfloatれたsymmetricグリッドで発生する幸せな特異点の副産物であり、これらの変数のいずれかを変更すると変更されます。

ここで起こっていることは、対称グリッドでは、各項目が同じ幅であるため、1 つの列を別の列と入れ替えることができるということです。を使用floatすると、配置した各列が左のアイテムに突き当たることがあります ( の場合ltr)。これら 2 つのプロパティを組み合わせることspanで、float常に 1 番目の列から始まる を定義できますが、対称グリッドの列を入れ替えることができるため、任意の位置に表示させることができます。次に、それを利用してそれらを積み重ねます。floatこの動作は、実際には、出力スタイルのメンタル モデルとisolation出力スタイルのメンタル モデル (前述のように、項目を列の位置に慎重に配置する)の主な違いです。

于 2014-02-17T12:56:30.083 に答える