問題タブ [susy-compass]

スージーをCodekitで実行した後、私はようやくもっと徹底的に試すことができました。私はグリッド全体とスージーのことから始めています。そこで、運動目的で構築しようとしている最近のWebサイトのデザインにSusyグリッドを適用しようとしました。しかし、Susysの動作と、Susyホームページのシナリオでカバーされていないいくつかのエッジケースのベストプラクティスについて、かなりの数の質問が発生しました。私のマークアップは次のようになります。

これは次のことにつながります（私のステータスのため、まだ画像を投稿することは許可されていませんが、この場合は必須なので、直接リンクを配置しました）：

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

したがって、divはページのコンテンツをラップしています。ヘッダーにはロゴ（下のスクリーンショットには表示されていません）とナビゲーションが付いています。次に、その灰色のボックスが浮いているための脇の要素があります。いくつかのセクション（レジスターカードなど）の下に配置されます。スクリーンショットには部分的に1つだけ含めています。各レジスタカードは、画面を全幅で覆う必要があります。各レジスターカードの間に、背景画像が透けて見えます。背景画像は@includebackground-size（cover）で配置されます。各レジスターカードの補足として、左右にそれぞれ約10％のブリードがあるはずなので、コンテンツは中央の80％にしか含まれていません。また、各セクションのコンテンツ領域には、liのマトリックス（上記のhtmlコードのように）またはコンテンツのdivを配置する1〜3の列が含まれています。私がこれまでに使用したcssのいくつかの部分：

最後のラッパー内には、脇とセクションがあります。基本的な質問は次のとおりです。

a）最初にベストプラクティスに関する一般的な質問。説明した例では、ラッパーdivに1つのコンテナーを配置するだけで十分ですか、それとも複数のコンテナーを作成して、ドキュメント全体に配置した場合にそれらのコンテナーを相互に整列させる方がよいでしょうか。すべてに1つのコンテナ、またはヘッダーに1つのコンテナ、aside要素に1つ、各セクションに1つのコンテナのいずれかを意味しますか？

b）脇の要素のためのコンテナを作成することは思慮深いでしょうか。左側の1列のコンテンツ領域で1回ブリードし、右側で1回ブリードすることを意味しますか？それとも、その場合にコンテナを使用することは不利ですか？

c）セクションを見ると、基本的に、セクションを画面の幅全体に塗りつぶし、両側にx列のブリード（pad（）？で配置）を配置し、中央に「コンテンツ」を配置することは可能です。 x列に分割された領域（スパン列を含む）。

d）スクリーンショットに見られるように; 各セクションの上部には、互いに向き合う2つの矢印があります。各矢印は、テキストを含むコンテンツボックスと、三角形と長方形を含む前後の疑似クラスで構成されます。後者は、画面の両側まで伸びる必要があります。各要素を列内に配置することで、レスポンシブなcssのみのソリューションを取得することは理にかなっており、可能でしょうか。

col1 col2 col3col4col5長方形の内容三角形の内容長方形の左右

100％の幅を割り当てることにより、各要素は、応答性を保ちながら、それが含まれる列の全幅を埋める必要があります。そして、このアイデアがうまくいく可能性がある場合は、セクションごとに2つのコンテナを作成する必要がありますか（矢印用に1つ、下にブリードがあるコンテンツ用に1つ）、または1つで十分ですか？

e）最後の質問はアプリケーションについてです。私が使用する場合：

最初からスクリーンショットのように見えます。Susyミックスインを使用すると、次のようになります。

結果は次のようになります。

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

さて、今のところは以上です。私はまだ少し混乱していて、ベストプラクティスについて、またこれまでのところすべてを順調に行っているかどうかについて確信がありません。;）ヒントや提案をいただければ幸いです。よろしくお願いしますラルフ

私は理解できないように見えるこのエラーに少し不満を感じています。以前はcss-fileを使用したhtml.erbファイルがありましたが、現在はscssに切り替えて、sass-rails、compass-rails、susyを追加しました。同じページを読み込もうとすると、このエラーが発生します。

エラー：

[..]/app/views/layouts/shared.html.erbを表示しています。行番号は次のとおりです。

スタックレベルが深すぎます

（[..]/app/assets/stylesheets/sharepage_new/screen.css.scss内）

ターミナルから：

ActionView :: Template :: Error（スタックレベルが深すぎます（[..]/app/assets/stylesheets/sharepage_new/screen.css.scss））：スプロケット（2.1.3）lib / sprockets / context.rb：180

レンダリングされた/Users/me/.rvm/gems/ruby-1.9.3-p194/gems/actionpack-3.2.0/lib/action_dispatch/middleware/templates/rescues/_trace.erb（1.0ms）レンダリングされた/ Users / me / .rvm / gems / ruby​​-1.9.3-p194 / gems / actionpack-3.2.0 / lib / action_dispatch / Middleware / テンプレート/rescues/_request_and_response.erb（0.7ms）レンダリングされた/Users/me/.rvm/gems/ruby -1.9.3-p194 / gems / actionpack-3.2.0 / lib / action_dispatch / middleware / テンプレート/rescues/template_error.erbレスキュー/レイアウト内（3.5ms）

Gemfileから：

やあ！

これは、SASS/Compass に対する私の理解不足が原因である可能性があります。

次のSASSコードでグリッド幅を出力しようとしています:

ブロック 3 には何も出力されません。:(

私も試しましたがcontent: columns-width($total-columns)、まだ何もありません。もしそうならcontent: "foo"、「foo」は印刷されます。

私は何を間違っていますか？susy で計算されたグリッド幅を確認するにはどうすればよいですか? また、compass watch出力で印刷できますか？

私は美しいSusyグリッドシステムを使用して、 WebDesignerWall.com の1つに似たレスポンシブレイアウトを作成することに成功しました。

実装に失敗したのはposition:fixedサイドバーです。

このようなサイドバーは、ページがスクロールされたときにスクロールせず、同じ場所にとどまります。これは非常に便利です（とにかく、狭いウィンドウでページの上部が乱雑になるため、実際にはサイドバーにこれ以上コンテンツを入れることはできません）。

position:fixed列に 適用すると、レイアウトがおかしくなります 。色付きのブロックは3列幅と宣言position:fixedされていますが、サイドバーに適用するとさらに伸びます。

問題は、サイドバーの幅が相対的、つまりパーセンテージで設定されていることだと思います。のためposition:fixed、幅は、コンテナではなく、ブラウザウィンドウの幅に対して測定されます（コンテナをに設定しましたがposition:relative）。

問題は、ビューポートではなく、コンテナに対して幅を測定しながら、ウィンドウに固定された列を作成するにはどうすればよいですか？

たぶんJSで要素の位置を固定することは可能ですか？

PS私はwidth: inherit解決策を試しましたが、それは私の状況には何の助けにもなりませんでした。

スージーとの最初の問題のほとんどをなんとか解決できたと思います。私が理解できない唯一の奇妙なことは、画像マトリックスを作成するときのように動作する理由です。

これが私のセットアップです：

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

これは 3x3 の画像のマトリックスである必要があり、ページの他の場所には 7x4 の画像のマトリックスがあるはずですが、どちらも奇妙に動作します。どちらも、両側とその位置に 3 つのマージン列があることを尊重しません。

想定される 7x4 マトリックスは次のようになり、想定される 3x3 マトリックスは次のようになります。

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

とりあえず以上です。Susy がなぜこのような振る舞いをしているのか、少しでもわかる人はいますか? 特に、すべてが基本的に収まる必要がある3x3マトリックスでは、6 + 3*6設定した列の数に等しくなります。なんとなく紛らわしい。

gemでsusyをインストールする必要があります。入力すると

エラーメッセージが表示されます。

ただし、githubでソースを確認しましたが、0.9タグは存在します。

これはどのように起こりますか？rubygemに最新バージョンではなく特定のバージョンをダウンロードさせるにはどうすればよいですか？

私はコンパスとスージーを始めています。私の目標は、レイアウトを電話、タブレット、デスクトップの画面サイズに適合させることです。Susyの例（susy.oddbird.netまたはSOの質問）では、列の数を画面サイズに適合させるパターンがあります。具体的には、次のようなネストされたルールがあります。

今の私の質問：コンテナ{@include container}は何をしますか？そして、なぜそれがデスクトップインクルードに再びネストされるのですか？

IE8以下のSUSYでマジックグリッドを正しく応答させるために使用するシム（ある場合）は何ですか？

Susy 以外のサイトでは、私は常にmoderizrまたは Google の shim を使用してきましたが、期待どおりに機能しました。初めての SUSY サイトに取り組んでいますが、最大サイズのメディア クエリが開始されません。

http://dev.apehangar.com

div の CONTENT を 960 グリッドに合わせる必要がある多くの要素がありますが、それらを保持する CONTAINER をグリッドの両側のガターに拡張したいと考えています。

たとえば、次の画像を参照してください。グリッドとして灰色の線でdivのサイズを指定したいのですが、5〜10pxの白い部分が外側に伸びています。それは可能ですか？

ナビゲーションの列を互いに突き合わせたいことを除いて、完全に機能するグリッドがあります。これはデスクトップ上の 24 列のマジック グリッドであり、これらの各ナビゲーション アイテムは 4/24 です。負のマージンを試してみると、ナビゲーション バーの幅全体にまたがらず、左にスライドして穴が残ります (最後の項目はオメガです)。これは列で行うことができますか、それともナビゲーションバーなしで行う必要がありますか? このスクリーンショットでは、わかりやすいようにすべてグレーにしています。