問題タブ [susy-compass]

Susy で最初のコンパス プロジェクトを構成しました。

私screen.scssの には、次のコードがあります。

出力screen.css結果は次のとおりです。

質問 1: 記事ブロックで omega 属性を除外すると、screen.scssこの ' ' がありません#margin-left: -1em;。これは何を意味するのでしょうか？

質問 2: すべての要素に width プロパティが設定されています。すべてのブロックがインラインで表示されるため、これはここで許可されますか?

susy をインストールし、存在することを確認しました。コマンド ラインから susy を使用して新しいプロジェクトを作成できますが、Scout でこれを実行しようとすると問題が発生します。require 'susy' のみを含む構成ファイルを追加し、それをプロジェクトの Scout ディレクトリに置き、それを参照するように GUI 構成を更新します。@import susy を試みるプロジェクトの Scout を起動すると、次のようになります。

「org/jruby/RubyKernel.java の 1038 行目の LoadError: no such file to load -- susy」

Scout で Susy を実行したことがある人がいるかどうか、もしそうなら、どのようにセットアップしたか知りたいですか?

スージーサイトを見ると、ブレークポイントに到達したときにどのように非表示.secondaryになりますか？

2 つの異なるコンパス プロジェクトで機能する優れたソリューションを見つけようとしています。1 つはブループリントを使用したコンパス (古いバージョン) に基づいており、もう 1 つは susy グリッド (新しいバージョン) に基づいています。

現在、watchプロセスに適したバージョンを再インストールする必要があります。

compile指定したバージョンで実行できますか? watchバージョンを指定してプロセスを実行することも可能であれば素晴らしいと思います。

私はスージーを使用しています。

content-first アプローチの活用に失敗し、window-px-widths-first を使用することにしました

最初はグリッドに対してコンテンツ ファーストのアプローチを試みましたが、すぐにサイトがさまざまなデバイスで予期しない動作をすることに気付きました。タブレットレイアウトなどが必要な場所にモバイルレイアウトが表示されます。特定の画面幅（px値）に一致するように、Susy設定のem値を調整することになりました。コードが醜くなり、実際にはコンテンツファーストのアプローチを使用していないことに気付きました。

これは、この不完全なアプローチを使用して作成したサイトのホームページの静的なスナップショットと、そのコードのスナップショットです。

そこで、コンテンツ優先のアプローチを完全に破棄し、最初に px 値を使用することにしました。

コードを書く前に、グリッドの要件を策定しました

まず、さまざまなデバイスを画面サイズでグループ化しました。次に、これらのデバイス グループに最も適したブレークポイントの px 値を考え出しました。

次の前提/要件があると思います。

1. Window-px-widths-first アプローチ (上記で説明)。

2. $container-style は流動的です。画面の幅が 2 つのブレークポイントの間のどこかにある場合、コンテナーの幅は、より大きなブレークポイントに一致するように自動的に調整されます。レイアウト内の列数は変更されず、下のブレークポイントに対応します。

3. 最後のブレークポイントはコンテナの最大幅です。サイトはそれ以上伸びることはなく、代わりにガターが追加されます。

4. モバイルファースト。「S」レイアウトから始めて、画面が広くなるにつれて他のレイアウトでオーバーライドします。

よく考えた後、私のアプローチは次のコードに進化しました

(このコードは合成例です。実際のコードから抜粋し、いくつかの適応を行ったので、何かが欠けていたり、矛盾している可能性があります。)

これは、このアプローチを使用して作成したサイトのホームページの静的なスナップショットと、そのコードのスナップショットです。

質問

1. window-px-widths-first アプローチに従うのは私の意図的な決定であり、次の質問に与えられます。content-first に対するあなたの議論に感謝しますが、私が間違っていると言うことにとどまらず、window-px-widths-first に固有の次の質問に答えてください。

2. 私のアプローチは、Susy で window-px-widths-first を実行するエレガントな方法ですか、それとも醜いコードですか?

3. コードをより優雅にするにはどうすればよいですか?

   すべてのコンテナーとすべての列に対して繰り返さなければならない多数のブレークポイント宣言が好きではありません。に複数のレイアウトを指定するという、あまり文書化されていない可能性を使用することしか考えられませんでした+container。+set-container-widthしかし、すべてのメディア クエリ内で実行する唯一のコードではない限り、そのアイデアでさえオプションではありません。:(

4. Susy で window-px-widths-first を使用する (および上記の要件を満たす) 推奨される方法は何ですか?

5. あなたが見つけた私のコードの欠点を明らかにしてください。私はSASSの初心者ですが、同じことをより効率的に行う方法を提案できると確信しています。

Susy を使用してモバイル ファーストの Web サイトを構築しており、画面サイズごとに異なるレイアウトを使用したいと考えています。各レイアウトには、列、列幅、ガター幅の独自のセットがあります。

どうすればいいですか？

1. 古いスージー法

古い Susy では、次のようにします。

[背景色は機能していることがわかります]

New Susy では、これを行うと、画面サイズに関係なく常に列数が 6 になります。それらは正しい列サイズでもありません。

2. ブレークポイント メソッド 新しい Susy には、レイアウトごとに異なる列を指定できる新しいブレーク ポイント メソッドがあります。これは私がそれを使用した方法です：

このコードを使用すると、レイアウトに関係なく、列が常に 4 のままになります。また、このメソッドを使用して、異なる列幅/パディング値を指定することもできません。

Susy はとても素晴らしいので、私が何かを誤解していることがわかります。しかし、ドキュメントを調べてさまざまなことを試すのに長い時間を費やしましたが、何が間違っているのかわかりません。

以前にこの質問をしたことは知っていますが、それは古い Susy バージョンに関するものでした。

私はcssでミックスインを使用することを好みますが、susy場合によっては、汎用グリッドクラスを使用すると便利な場合があります。たとえば、これらの宣言をインライン化することが理にかなっているWebフォームで使用する場合などです。

それを行う方法はありますか？

現在、私はこれらのクラスを次のように手動で生成しています。

流体カラムと固定ガターを​​備えた12カラムグリッドを構築しようとしています。ウィンドウのサイズが変更されると列の幅は変わりますが、ガターは一定のままです。基本的に、列のパーセンテージ、側溝のemsです。

これはスージーで可能ですか？

これが問題です。私はSusyに慣れていないので、これを達成するための最善の方法は完全にはわかりませんが、bodyクラスとすでに以下に設定されているメディアクエリに基づいて.hfeeddivにレイアウトを適用しようとしています。 。

これが理由です。私はWordPressでこれを行っていますが、本体に適用されたCSSクラスを使用してスタイル設定されたさまざまなレイアウトがあります。具体的には、2つのクラスは.full-width-contentと.content-sidebarです。セレクターは、コンテナー全体にまたがるか、現在定義されている領域にそれぞれ配置する必要があります。したがって、スタイルを設定したい特定のセレクターは、「。full-width-content.hfeed」と「.content-sidebar.hfeed」になります。別のコンテナを含めるように設定しようとしましたが、機能しません。

おそらく、このセクションを定義されたグリッドから切り離して、クラスで選択してから、メディアクエリを実行する必要がありますか？

スージーでこれを達成するための最良の方法は何ですか？

私は最近いくつかのプロジェクトで Compass Susy を使用しましたが、数回試してみたところ、いくつか疑問が生じました。

ちなみに、ここではデスクトップ ファースト ワークフローとして開始しています。

これらのプロジェクトでは、デフォルトの列幅、ガターなどを設定しました。

10px のガターを持つ 90px の 12 列のグリッドがあるとします。

次に、モバイル用のメディア クエリに到達すると、たとえば 4 列のグリッドが必要だとすると、メディア レイアウトは次のようになります: $mobile: 4 480px

@include at-breakpoint($mobile) { // ここにスタイル }

私が本当に混乱しているのは、メディアのレイアウトを理解していないことです。メディア レイアウトで最小幅 480 ピクセルで 4 列が必要であると指定した場合、列の幅または必要なガター幅をどのように知るのでしょうか。デフォルトを使用していると思います。それはそれが使用するものですか？

これを回避するには、メディア クエリごとに、メディア クエリを設定し、列をスパンしてから、with-grid-settings mixin を使用して新しいグリッドを指定し、コンテナーを再インクルードする必要がありました。

スティックの端を間違っているだけかもしれません。Susy がどのように機能するのか、また Susy を適切に使用するにはどうすればよいのか、誰か説明してもらえますか?

ありがとう