2

私は 3 列のグリッドを持っており、この+span関数を使用して列を定義することができます。したがって、要素を 1 つの列にまたがらせたい場合は、次のようにします。

+span(1 of 3)

そして2つ：

+span(2 of 3)

等..

要素が 1 つの列にまたがるようになりましたが、位置は 2、つまり中央の列にありました。

Susy のドキュメントには、次のようにatキーワードを使用して場所を指定するように記載されています。

+span(1 at 2 of 3)

ただし、これは機能せず、私の列は最初の位置、つまり左側にあります。

結果のCSS:

width: 30.303030303%;
float: left;
margin-left: 1.5151515152%;
margin-right: 1.5151515152%;

私がする時

+span(1 at 3 of 3)

結果のCSS:

width: 30.303030303%;
float: right;
margin-left: 1.5151515152%;
margin-right: 1.5151515152%;

これは正しく機能し、私のコラムは 3 番目の位置にあります。

列を 2 番目の位置に配置するには、どうすれば場所を機能させることができますか?

説明に役立ついくつかの画像：

1 列目:

ここに画像の説明を入力

列 3:

ここに画像の説明を入力

私が欲しいもの：

ここに画像の説明を入力

この最後の例は、次の方法で実現されました。

float: none
margin: 0 auto

これはハックだと思います。また、フロートがないため、高さが間違っていることも意味します。スージーと一緒に仕事をするべきだとは思わない。

バージョン:

コンパス 1.0.1 スージー 2.1.3

.scss ではなく .sass ファイルを使用しています

4

1 に答える 1

5

atを使用している場合、キーワードは要素を配置するためにのみ機能しますisolation。これは、配置がコンテキストに依存するためです。つまり、アイテムは他のアイテムとの関係で浮いているためです。Susy は、他のアイテムが周囲にあることを知る方法がありません。分離は、すべての要素を左端から離して配置することで修正します。したがって、1 つのオプションは を使用すること+span(1 at 2 of 3 isolate)です。

ただし、それは必ずしも最良の選択肢ではありません。単純に要素を別の位置に移動するには、pushとpullmixin を使用します。

+span(1 of 3)
+push(1)

mixin は、指定された要素の前に任意のpush数の列 (または任意のスパン) をマージンとして追加します — 要素を元の位置から押し出します。

于 2014-08-30T21:28:03.133 に答える