問題タブ [susy-compass]

ガターの中央にある 2 つの Susy グリッド アイテム間に 1 ピクセルの境界線を描画するための推奨/最もクリーンな方法は何ですか?

Susy は、グリッド アイテムに margin-right を追加することでガターを作成するため、border-right を単純に追加することはできません (たとえば、Zen Gridsを使用すると、ガター幅の半分を適用してガターを作成できます)。両側にパディング)。

with-grid-settings()mixin を使用してガターのない代替グリッドを定義することもできると思いますが、それは厄介な解決策のように感じます。

divが画面の全幅を想定できるようにしながら、コンテンツをdiv内の中央に配置したいと思います。ヘッダーにxを繰り返す背景画像があり、コンテンツを中央に配置しながら画面の全長を伸ばす必要があります。以下の例に示すように、divをコンテナーとして追加できることはわかっていますが、それによってhtmlに多くの非セマンティックマークアップが追加されます。スージーコンテナインクルードが私のプロジェクトのラッパーに追加されました。

余分な内部コンテナdivを必要とせずにSusyでこれを行う方法はありますか？ヘッダーだけで問題ない場合でも、私のマークアップでは多くの場所でこれが必要になります。最終的には、cssグリッドフレームワークのように見えます。

Susy Gridsを使用して、コンテナを最小高さ100％にし、フッターをページの下部に配置するにはどうすればよいですか。

html

css / scss

Compass/Susy を初めて使用しています。@include コンテナー mixin を使用しているときに問題が発生しています。自動的に clearfix が適用されます。これは望ましくありません。これをオフにする方法、またはオーバーライドする方法はありますか?

コンテンツ div とサイドバー div をネストしたメイン コンテンツ div があります。私のコンテンツ セクションは背景色で、画面の左側にずっと移動したいのですが、列ごとに設定したところで停止します。これは 8 です。

ブリード ミックスインを試して 10000px 程度にしましたが、すべてのコンテンツが圧縮されました。私が求めているものを達成するために私にできることはありますか? ありがとう！

メソッド モバイルを最初に使用するか、レスポンシブ ウェブサイトを使用し、susy を使用します。_forms _typo _layout,_mixins などのファイルを整理する方法. モバイル (デフォルト) およびブレークポイント (タブレット、デスクトップ) および出力ファイルを作成する方法:

ありがとう

基本的なものが欠けているかもしれませんが、なぜスージーグリッドが960pxにならないのですか？

そして、私は幅830pxを取得します。他のグリッドのように960pxではない理由はありますか？

これは私を早期の墓に送るつもりです、私を引き抜く助けを前もって感謝します.

短い話: 複数at-breakpointsのリスト要素は、タブレット グリッドからデスクトップ グリッドに移行するときに失敗しますが、モバイル グリッドからタブレットに移行するときにはうまく機能します。

ところで、モバイルファーストのアプローチから始めます。

マークアップは次のとおりです。

Susy の基本構成:

基本的なレイアウト:

最後に、現在失敗しているコード:

何が機能しますか？を使用して、モバイル 4 列グリッドからタブレット 12 列グリッドへのブレークat-breakpoint。甘い！

何が失敗していますか？omega(2n)の 2 列表示を取得するためのタブレット グリッドから抜け出すと、2.member list items番目のリスト要素はomega(2n)必要のないデスクトップに移動したにもかかわらずそのままの状態を維持し、目的の 5 列表示を壊します。

Firebug から#members-frontpage .member:nth-child(2n)の抜粋: #2 リスト項目用。そこにいてほしくない。それが理にかなっていることを願っています。

.member elementハックな解決策は、親の .scss ネストから携帯電話からタブレットへの のブレークを削除することです。

サブピクセルの丸めエラーをかなりの時間解決しようとしましたが、これまで何度も何度も失敗しました。私は、サスとスージーの助けを借りて、その努力を成し遂げようとしています。前回の試行で使用した mixin は、Github の Susy issue tracker から取得しました (スペース、列を使用し、そこで提案されているように margin-left/right プロパティをプッシュしました):

私のScssは次のようになります。

まず、画像グリッド用のカスタム ガターを作成しました。次に、変数 y を定義して 2 のステップで反復し、分離 mixin (分離 (2,12) 分離 (4,12) など) を呼び出すことができるようにしました。12 より大きい値の場合、値は最終的に for ループ内で 2 にリセットされます。次に、30 枚の画像を歩いている各 li の列にまたがります。繰り返し分離 mixin を呼び出すたびに。for ループの後に @include nth-omega(6n); を追加しました。6 番目の要素ごとに新しい行を取得します。

でも、なぜか全然うまくいかない。最初の 4 行には最初の画像がなく、最後の行には最初の 5 つの要素がありません。どんなアイデアや提案も大歓迎です。ありがとうラルフ

require 'susy'なぜjrubyは私のコンパスconfig.rbで見つけることができます@import 'susy'が、*。scssファイル内で問題が発生します：

私の既存のアプリケーションは、フロントエンドでレスポンシブデザインの使用を開始したいと考えています。ただし、すべての開発者のマシン、統合環境、パフォーマンス環境、および本番環境にruby / compassをインストールすると、イニシアチブが失われます。

この質問とこの簡略化されたチュートリアルに従って、現在のAnt build.xmlを使用して、jRubyを使用していくつかのターゲットを作成しました。

どこにでもrubyをインストールする必要がないようにするためのjarトリックのgems ：最新のjrubyごとにダウンロードされたjruby-complete-1.6.8.jarには、2013.03.20の時点で相対パスの問題があります

ビルドプロセス中に使用されるantターゲット：

ユーザーがscssファイルを保存するときに「自動コンパイル」するためにEclipseベースのIDEによって使用されるantターゲット。 Eclipseの「自動ビルド」scssファイルを作成する手順（ステップ5から開始）

最後に、antターゲットが使用する「compile.rb」は次のとおりです。

およびコンパスで使用されるconfig.rb：

そして最後に、scssファイルでsusyを使おうとしています。