問題タブ [susy-sass]

Susy 2 で単純なネストされたレイアウトを構築しようとしています: 2 つの列 (子) を持つコンテナーで、各子列にはコピーと 2 つのネストされた列 (孫) が含まれます。

孫の列には独自のガターがあるため、そのコンテンツが親のガターと一致していないことに気付きました。

理想的には、孫 (およびその背景色) は子要素の全幅に拡張されます。

これを達成するための最良のアプローチは何ですか？

要点: https://gist.github.com/andreimoment/2a734aa4a0e99b2866e9

HTML:

SCSS:

私は「Susy」が初めてで、いくつかの項目を理解するのに苦労しています.

3 つの流動的なプロモーション ボックス (添付の画像ではすべて灰色) と 1 つの静的なボックス (300px x 250px の大きなボックス広告 - JPG ファイル) を含む行を作成しようとしています。黄色のボックス (広告) のスケールは必要ありませんが、他の 3 つのボックスは流動的で、最後の灰色のボックスの右側に等間隔を維持したいと考えています。

現在、ページのスケーリングを開始すると、黄色のボックス (画像) が 3 つの流体ボックスの下にドロップします。それらが1つの行として機能する方法はありますか?

前もって感謝します

Susy で静的レイアウトを実験しています。同じガター幅でネストされたグリッドを確立する方法についていくつかの指示が必要です。以下のこの例では、12 列のうち 9 列にまたがる .main があり、その子 .main-item を、同じ 18px ガター幅を維持することによって、9 列レイアウト内に 4 列レイアウトにするのが好きです。

http://sassmeister.com/gist/2a414c2b9dc6f332b89b

もちろん、すべてがパーセンテージであるため、これは流体グリッドでシームレスに機能しますが、この実験では静的グリッドで試してみたいと思います。

これを行う最善の方法は何ですか？「with-layout」ミックスインは、新しいレイアウトを定義することによってこれを達成する唯一の可能な解決策ですか、それともこれを達成する他の方法はありますか?

私がこれまでに試したこと: 1. .main-item の span(3 of 12) に言及するだけで、それが機能しないことを知っていますが、それでも試してみましたこのエラー「@return なしで関数 valid-column-math が終了しました」。私はそれを間違ったことをしただろうと思います。

あなたのアドバイスに感謝します。

列スパンの 4 分の 1/5 にまたがるガターを生成しようとしています。グローバル設定は次のとおりです。

このセレクターが続きます:

生成された CSS.mosaicは次のとおりです。

各辺のパディングは 4/5 / 12 (列) / 2 (辺) = 1/30 = 3.333...% であると予想していました。 ) 列スパンの合計幅。

1. 期待される結果を得るにはどうすればよいですか?
2. パディング値 (1.85...%) はどのように計算されますか?
3. 期待したものと一致しないのはなぜですか?

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

そして2つ：

等..

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

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

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

結果のCSS:

私がする時

結果のCSS:

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

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

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

1 列目:

列 3:

私が欲しいもの：

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

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

バージョン:

コンパス 1.0.1 スージー 2.1.3

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