問題タブ [susy-compass]

2 つの異なるレイアウトを作成しています。1 つは横向き用、もう 1 つは縦向き用です。横長のレイアウトには、幅の広い列があります。これを行うために、新しいバージョンの Susy を使用しています。

これは私のコードです:

しかし、うまくいきません。列は同じサイズのままです (小さい縦サイズ)。どうすればこれを修正できますか?

私のページの他のレスポンシブ コードは機能しますが、機能しないのはグリッドだけです!

Susy Documentationにはレスポンシブ グリッドに関するセクション全体がありますが、従うのは少し複雑であり、向きについては説明していません。以前に尋ねたこの質問もありますが、解決策は機能しません (解決策が古い Susy バージョン用だったためだと思います)。

提供できるヘルプをありがとう！

コンテナのデフォルトのガター値をベース値でオーバーライドすることは可能ですか？たとえば、次のようになります。

必要に応じて、ガターを20pxからたとえば5px、またはその他の必要な値に最小化できるようにします。

ミックスインを介して可能ですか、別のコンテナ/レイアウトを配置する必要がありますか、それともそのタスクを解決するためにプレーンCSSを使用する必要がありますか？ありがとう

更新： より具体的には、樋の正確なサイズを探していません（これまで読んだ限り、丸めのため、とにかく難しいでしょう）、樋を最小化して列を拡大したいだけです間接的に幅。

https://dl.dropbox.com/u/8578/Boxes.png

現時点では、含まれている7つの列とその側溝の前後に3つの列を押しつぶしました。これまでのところ、列とその画像の幅が小さすぎます。そのため、ガター幅を縮小し、列幅を間接的に拡大したいと思いました。

スージーの設定はそのように見えます：

コンテナはページ全体のラッパー内にあるため、コンテナの幅はこれまで設定していません。

スクリーンショットに示されている画像マトリックスの特定のセレクターは次のとおりです。

詳細が必要ですか？それでも、その問題を解決するためにwith-grid-settingsミックスインを使用することをお勧めしますか？そして、set-container-widthミックスインは本当に必要ですか？相対的なものを設定した場合、絶対値は必要ないと思いましたか？ありがとうラルフ

アップデート2：

Ufff私は下のコメントで言及された提案された小さな秘密のアプローチを試しました。しかし、これまでのところ、散らかった混沌とした「パッチワーク」のように、きれいな表示を得ることができませんでした...;）全体的に混乱しているようなものです。基本的に、記事の著者は2つのステップを推奨しました。最初に彼は要素を含むコンテンツに-100％のマージンを追加し、次のステップでオブジェクトを元の場所に押し戻しました。長い試行の中での私の最後のセットアップは、現在そのように見えますが、まだ解決策が見えていません。

提案されているように、「li」の包含要素のwith-grid-settingsミックスイン内に配置したmargin-right。しかし、問題は、プレミックスインをどこに配置するか、特にどの番号を含める必要があるかです（スキッシュ番号も考慮に入れる必要があります）？すべてのliで同じ値ですか、それとも画像を個別に水平位置にプッシュするためにforループが必要ですか？そして、li要素内のミックスインの順序は正しいですか？それがどこに置かれるかは重要ですか？スパン列の終わりまたはスパン列とn番目のオメガの間？全体的に私はまだ混乱しています。グリッド、画像マトリックス、スージーはまだ私の脳を回転させ続けています。：/

アップデート3：

ありがとう！私はついにそれを機能させました。最後に、私の解決策について2つの質問があります。

forループのレイアウトにもっとエレガントな方法はありますか？そして第二に、なぜこのバージョンと私が$ countをコメントアウトしたときのバージョンが可能であるのですか：$ count + 1; ステートメントは同じ視覚的な結果につながりますか？実際にコメントアウトされたプッシュ変数の2番目と3番目のカウントアップはありません。$ countなしでそれがとにかく機能する理由はありますか：$ count + 1 ;? ありがとう！

アップデート4： もう少し遊んでみたところ、次のバージョンは魅力のように機能することがわかりました。$ count変数はまったく必要ないようです。また、プッシュ/プレミックスインに含まれる値の増分増加も必要ではないようです。単純な0でうまくいきました。助けてくれてありがとう!!!

アップデート5

前回のコメントで、アップデート4に示されている例は、一見したところほどうまく機能していないことをすでに述べました。私は今、Palantirの記事からの提案を完全に再構築しようとしました。その下には、ビデオに示されている7x4および3x3マトリックスのscssパーツがあります：https ：//dl.dropbox.com/u/8578/matrix.mov

一見するとマトリックスは壊れているように見えますが、ビデオ内のインスペクターを詳しく見ると、両方のマトリックスで各要素が正しい水平位置にプッシュされているように見えます。唯一の問題は、各liが別々の行に含まれていることです。これは私が入手できた最も近いバージョンです。：/今のところ、適切なマトリックスに到達するためにそれらのピースを組み合わせる方法についてはアイデアがありません。フロートと表示プロパティを使って、多かれ少なかれ可能性を試しました。しかし、運はありません。誰かがおそらくヒントを持っていますか？

スージーとのセットアップの何が問題なのか理解できません。私はOSX10.7.4を使用しています

私はここに沿ってフォローしました：http ：//susy.oddbird.net/guides/getting-started/

エラー

インストールしたGems：

プロジェクトのルートにある私のconfig.rbファイル

_base.scss

screen.scss

このコマンドをディレクトリwpsvntree：から実行compass create trunk -r susy -u susy しました。成功しました。

それからcompass watch trunk/

プロジェクトを表示すると、上記の最初のエラーが表示されます。

どこが間違っているのかわかりません。

ありがとう。

rtl 言語と ltr 言語の両方でレイアウトを機能させるときに、重複する css コードの量を最小限に抑えるのに compass/sass が役立つ方法はありますか?

Compass Susy を大きな幅からモバイルまで機能させる方法はありますか?

ファイルサイズを小さく保つためにモバイルを最初に理解していますが、レイアウトの観点からは、完全なデスクトップバージョンを構築し、ブレークポイントで幅を狭くするアイテムを削除するのが最善でしょうか?

何かご意見は？

Susy で次のレイアウトをどのように実装できますか?

とその逆：

これまでのところ、上の図については、次のことを試しました。

結果は次のとおりです。

どういうわけか、その画像マトリックスの例で何度も何度も問題に遭遇したようです。Susy と組み合わせて対処しています。:/ プロジェクトにメディア クエリを適用して応答性を高めてプロジェクトを終了する準備として、最初に現在の状態を調べ、ブラウザー ウィンドウのサイズを変更しました。次のことが起こりました。

https://dl.dropbox.com/u/8578/Resize.mov

表示されている両方のイメージ マトリックスは、ラスター イメージで構成されています。黒の画像マトリックスは、問題なくサイズ変更および拡大されます。しかし、2 番目のマトリックスには、再び拡大する際の問題があります。それは単純なCSSの問題ですか、それともSusyに関連していますか? そして、それを修正する方法はありますか？:/

Susy の基本設定は次のとおりです。

画像については、以下が適用されました。

最初のマトリックスの HTML 部分は次のようになります (li 要素を 1 つだけ入力しました。他の 27 要素は、タイトルとリンクされた画像のみが異なります)。

最初のマトリックス (7x4) の Susy とレイアウト関連の CSS パーツは次のようになります。

2 番目のマトリックスの HTML 部分は次のようになります (li 要素を 1 つだけ入力しました。他の 8 つの要素は、タイトルとリンクされた画像のみが異なります)。

2 番目のマトリックス (3x3) の Susy およびレイアウト関連の CSS パーツは、そのように見えます。これらは、異なるパーシャルに配置されているため、分割されています。

私はこれがうまくいくと思った：

しかし、次のエラー メッセージが表示されます (CodeKit で):

error screen.scss (_support.scss の 195 行目: Mixin with-only-support-for は 6 つの引数を取りますが、8 つが渡されました。)

「@include nth-omega();」なし エラーメッセージが表示されません。'@include nth-omega(4);' どちらも機能しませんでした。

コードキットにリンクされている.scssファイルを保存しようとすると、次のエラーが発生します。

「コンパスはプロジェクト内の1つ以上のファイルをコンパイルできませんでした：

/Applications/CodeKit.app/Contents/Resources/engines/compass/bin/../lib/compass/configuration/data.rbの161行目のLoadError：ロードするファイルがありません--susy--traceを指定して実行して確認してください完全なバックトレース」

誰かが理由を知っていますか？これを整理するまで先に進めません。これらすべてのgemとコードキット自体を更新およびアンインストール/インストールしようとしました。

誰か助けてくれませんか？前もって感謝します！

iPhoneのモバイルSafariのスケーリングを期待どおりに機能させるのに問題があります。グリッドにSusyを使用しています：

そして、私はこのビューポートメタタグを使用しています：

問題は、一部のページがiPhoneで完全に縮小されないことです。これは、ページの高さが幅よりも小さい場合にのみ発生するようです。したがって、ページの幅全体を表示する代わりに、ビューポートを高さ方向に埋めるまでページを縮小します。「長い」ページは期待どおりに縮小されます。

これをトラブルシューティングする方法がわかりません。グリッドとメタタグを使っていくつかの異なることを試しましたが、役に立ちませんでした。