問題タブ [susy-sass]

私はこれらのスタイルを持っています:

グリッド アイテムが正しく並んでいます。この場合、それぞれ<li>が 8 つの列のうちの 2 つにまたがっていますが、上記のようにグリッドの背景表示をオンにすると、次の出力が得られます。

なぜこれをやっているのですか？確かに、8 つの列が表示されているはずですか?

ありがとう、ニール

更新 1:

だから、background-sizeアウトされているステートメントは、このように間違って出力されていますbackground-size: 8.47458%, 100% 1.5;

何らかの理由で、ベースラインの高さの設定を最後に追加しているようです。$base-line-height変数を7.5のような奇妙なものに 変更することでこれを確認しました。これにより、出力が次のように変更されます。background-size: 8.47458%, 100% 7.5;

初期ベースラインの高さ設定を含む私のコードのもう少しは以下の通りです:

明らかな理由もなく、行の高さがここに追加されている理由はありますか?

I have a 5 column grid from Susy2 and Sass where the header and footer should be 100% the width of the body (for a full bleed effect) but their content should still use the grid's gutters.

Here's some sample markup:

And here's the Sass and Susy that I've written:

Here's a Codepen demo: http://codepen.io/KatieK2/pen/xbdVbJ?editors=110

The problem is that header and footer have a small margin on their right sides, and they don't use any gutter spacing in the inside. How can I get them to be the full width of the container, and include the gutter as padding?

これは私のsusy構成です

テストコード:

コンパイル後、何も返されません...

または

次のエラーが表示されます:無効な null 操作: "15.75092% plus null"

どうしたの？

通常は画面の幅の 80%、最大幅は 1440px の流動的なグリッドが必要ですが、768px 未満では画面の幅の 80% ではなく 100% になります。

「コンテナ」の設定が 1 つしかないため、これにアプローチする最善の方法、またはそれがどの程度可能かはわかりません。

私の現在の設定は次のとおりです。

次のようなブレークポイントに基づいて、これらの設定を条件付きでオーバーライドしようとしました。

しかし、それはブレークポイントの仕組みではないため、うまくいきません。

Susy でこの種のレイアウトを実現する方法はありますか? 私が見た限り、これはかなり一般的なパターンであり (したがって、私はそれを達成することを任されています)、コンテナーが呼び出されるたびにオーバーライドする必要はありません。

susy を使用して、ブートストラップのような単純なグリッド システムを作成したいと考えています。

私のスージー設定：

サス:

HTML

問題は、ネストされた div 内のパディングです。#leftおよび#rightdivのパディングは適切ですが、 susy はパーセンテージをパディングとして使用するため、#right > .col-6内部の div ( )は小さくなっています。#right

このようにsusyを使用する方法はありますか？

Susy gallery mixin を使用しています。または、span を使用することもできますが、アイテムの高さが等しくありません。そのため、メーソンリーも使用する必要がありますが、レイアウトが常に混乱します。

サス:

Javascript

誰もそれをやったことがありますか？

これは私が使用している石積みのスクリプトです: http://masonry.desandro.com/

susy で列幅を変更する方法があるかどうかを知りたいのですが、静的ではなく流動的なレイアウトを使用しています。

susy で固定位置要素を使用しているときに少し問題があります。位置が固定されている要素は、グリッドではなくビューポートを基準にしてサイズ設定されることを知っています。しかし、私はこの問題を解決する方法がわかりません。

問題を示すためにペンを作成しました。

http://codepen.io/emjay/pen/vEabNQ

これが私のsusy構成です：

そしてここに私のコード：

HTML:

SCSS:

ウィンドウが 1200px より大きい場合、サイドバーは定義された 3 列よりも多くのスペースを使用することがわかります。

誰かがそれを修正する方法を知っていることを願っています。:)

現在、SUSY を使用して、作業中の Web サイト用のレスポンシブ グリッド システムを作成しています。

私の grid.scss ファイルは次のようになります。

ただし、別のデスクトップ 6 クラス内でデスクトップ 6 クラスを使用すると、ガター幅が、ネストされていないコンテンツの場合の半分になります。

すべてが列幅に応じてパーセンテージに基づいているため、これが発生する理由は理解していますが、これを上書きしたり、ネストされた DIV のスタイルを追加してガターを 2 倍の幅で使用したりするにはどうすればよいですか?

どんな助けでも素晴らしいでしょう。

ありがとう