問題タブ [susy]

susy は初めてで、この単純な質問に対する答えが見つかりません。

html構造は次のとおりです。

ここに私の基本的なsusy設定とレイアウトがあります:

基本的に、サイドバーはホバー時に 1 列から 4 列に展開され、それに応じてメイン div がプッシュされます。

.sidebarサイドバーが展開されるまで見えないように、要素に 1 列のマージンまたはパディングを追加する必要があります。ただし、.sidebar h2 { @include prefix(1 of 1)}パディングを使用すると、サイドバーと一緒に展開され、表示されません。代わりに使用margin-left:span(1)すると、非常に小さな値が得られます (サイドバーの幅の 1/16?)。

内部からグリッドの幅の値 (つまり、span(1)) を取得するにはどうすればよい.sidebarですか?

これが Susy が処理するように作られているかどうかわからないのですが、 a を含む 2 つの要素を取得spanして親を均等に埋めるにはどうすればよいですか? したがって、行 1 と行 2 は同じ高さになります。

例: css

私は時々 Sass を使っていましたが、最近 Susy について何か聞いたことがあります。

Susyを使用するのは初めてです。アプリケーションにダウンロードしてインストールしました。Susy 2.2を使用しています

同じ幅 (50%) の 2 つの列を持つ単純なページ/グリッドを作成しようとしています。私が直面している問題は、各列の幅が 44.4444% しかなく、最初の列の幅margin-rightが 11.111% であることです。

HTML:

CSS:

デフォルトのガターサイズを小さくするにはどうすればよいですか? また、 が画面の中央に表示されるようにするborder-rightにはどうすればよいですか?log-in-section

susyは初めてですが、少し難しいです。

HTML

SCSS

私はこれが正しいと思いますが、私の列はグリッドの外に出ています:

ここで実行中のコードを確認できます: http://codepen.io/EightArmsHQ/pen/Ejjxwv

グリッド内の列を正確に取得するにはどうすればよいですか?

次のマークアップがあるとします。

のbody固定幅は次の910pxとおりです。

にbodyはarticle、2 つのネストされたdivs(.fooおよび.bar) で構成される要素があります。

この時点で、必要に応じて、.fooそれぞれ.bar6 つの列を使用します。これは、次のようにして簡単に実行できます。

bodyto@include containerとそれに続く要素 ( article) に別の要素が@include container直接含まれていても問題ありませんか?

Twitter Bootstrap では、acolは常に a の後に続く必要がありますrow。しかし、これは Bootstrap ではありません。スージーです。

Susy で、arowと aの同じ概念は何colですか? それとも@include span基本的に両方を行いますか？

Susy グリッドを使用しています。幅が異なるブロックのギャラリーを作成する必要があります。それらは 1/3、2/3、および 3/3 幅のブロックになります。ページ上にこれらのブロックが多数存在する可能性があり、ランダムな順序で配置される可能性があります。ブロックが 1 行に収まらない場合は、次の行にジャンプする必要があります。

次のコードは役に立ちません...

ギャラリー mixin は同一の要素に対してのみ機能するためです。 http://codepen.io/inliner/pen/YXWRRp

では実際に可能なのでしょうか？

私はこのようなものが必要です - http://codepen.io/anon/pen/vOKQbx しかし、マージンを処理する正しい方法で。ブロックはコンテナー内で正当化する必要があります。

解決しました!! （下を参照）

明らかに、私は Susy の初心者です。すべてのドキュメントを読みます。Zell のチュートリアルの無料の章を読み、彼のブログ投稿のほとんどを読みました。たまたま他の情報源に目を通した。ガター幅の変更に関する情報はどこにも見つかりませんでした。

プライマリ グリッドのガター幅を変更しようとしましたが、変更しても何の反応もありません。私が見たすべての測定単位を試しました。それでも、何も起こりません！

コードは次のとおりです。

私も試しました：

と

と

と

と

あなたは絵を手に入れます。widthまた、サフィックスを削除して、値のバリエーションを無限に繰り返してみました。

何もない。
ネイサン。
なだ。

何を与える？

編集

コンテナ グリッドに関する CSS は次のとおりです。#grid

解決した

問題は、「ガター」ではなく「ガター」と書いたことです。