問題タブ [susy-compass]

私は垂直リズムを理解し、一日中読んで、いくつかのことを試しましたが、スクリーンショットでわかるように、コンパスパディングトレーラーを正しく適用できなかったため、レイアウトが壊れ続けています：

！スクリーンショット

• 背景が黄色の線が私のhrタグです。
• 背景がオレンジ色のものは記事です。

これが私のコードです：

HTML：

CSS：

わかりやすくするために、HRのスタイルをコメントしました。

ギャップがより目立つ別の例を次に示します。

！スクリーンショット2

ここで何が間違っているのかわかりません。このプロパティを理解するために私を助けてください。

リンク：

• http://compass-style.org/reference/compass/typography/vertical_rhythm/#mixin-trailing-border
• http://www.youtube.com/watch?v=ls3Clk-kz3s&feature=player_detailpage#t=464s

グリッド幅として 978px、グリッド パディング 12px を使用してレイアウトを設計しました。正直なところ、グリッドのパディングの目的を本当に理解したことがありません。グリッドのパディングが全幅の内側に適用されると思っていたので、今ではさらに混乱しています。グリッド。

たとえば、私のヘッダーの背景色は#333. ロゴ部分を3列にまたがっていますが、ちょうど端にあるので見栄えが悪いです。ヘッダーの内側に 12px のパディングを追加すると、明らかに列の流れが台無しになります。のように、span-columns mixin に追加しようとしました@include span-columns(3, 12, 12px 0px)が、パディングが広すぎます。これは、左右にあるすべてのものに必要になるため、効率的ではないと思います。

では、グリッドの内側にパディングを入れる最良の方法は何でしょうか?

ここに小さな構造があります：

#page-wrapperおよびdiv にパディングを追加しようとしました#pageが、うまくいきませんでした。

/ * ** * *更新* ** * * /

ここに私が達成しようとしているもののスクリーンショットがあります:

これはレスポンシブが必要なデスクトップ レイアウトなので、パディング効果はレイアウト全体で同じにしたいと考えています。基本的に、スクリーン ショットのグリッドは合計 1002 の幅で、横に 12px、列が 12 ～ 54px、ガターが 11 ～ 30px です。

これは花火のテンプレートなので、私の 320 ページは 8 列、幅 27 ピクセル、ガター 12 ピクセル、ガター幅 10 ピクセルです。前に述べたように、グリッドのパディングのポイントがよくわかりません。

ご覧のとおり、コンテナーの側面にパディングが必要です。デフォルトでは、すべてが端に置かれます。

これが私のセットアップのコードスニペットです：

ここで、他の投稿を確認して行ったことがありますが、うまくいくようですが、それが正しい方法であるかどうかはわかりません。

ブレークポイントに基づいて別のグリッド設定を使用する方法を理解しようとしていますが、それを機能させることができません。これが私のコードです。メディアクエリに応答ミックスインを使用しています。

6 列の固定幅のグリッドがありますが、特定の「行」を 5 列にしたいのですが、それは可能ですか?

ありがとう

SusyCompassフレームワークを使用して2divを右にフロートさせようとしていますが、クリアの問題があります。

そして、これが私のスージーレイアウトコードです：

これがどのようにレンダリングされるかの例を示すために、以下はスクリーンショットです：

ご覧のとおり、上にクリアされていませんが、に揃えdiv-3ます。div-5div-1

おそらくミックスインを使用できると思い@alphaましたが、Susy 1.0（私が使用している）では非推奨になっています。私もそのまま使ってみまし@omegaた。div-3div-5

ブレークポイントのミックスインで「font-size」パラメータを使用した経験はありますか？

ドキュメントには次のように記載されています...

私が使用しているデザインでは、モバイルファーストのアプローチを採用しているため、$ base-font-size=12pxです。

次に、次のように50em（この例では任意の値）にブレークポイントを追加しています...

これを正しく理解したかどうかはわかりませんが、「font-size」の値を指定した場合、画面が50emを超えるとフォントサイズが16pxに増加することを期待していました。

ただし、フォントサイズはどのサイズでも12pxのままなので、この「font-size」パラメータの目的に関してスティックの端が間違っている可能性があると思います。

このパラメータが何に影響するか知っている人はいますか？

私は以下を使用して新しいrailsプロジェクトを開始しましたgemfile：

次に@import "susy";、application.css.scssファイルにアクセスしようとしましたが、次のエラーで失敗します。

インポートsassy-buttonsは機能しますがsusy、何らかの理由で機能しません。

こんにちは、codekit を使ってみます。最新のコードキット バージョン (1.26) をインストールしましたが、ターミナル経由で最新バージョンの sass とコンパスもインストールしました。Codekit 内で、端末にイ​​ンストールされているコンパスの外部バージョンを使用するように切り替えました。Codekit dev によると、コンパス拡張機能の内部コードキット コンパス バージョンは外部であり、依存関係の問題が発生するため、現時点では必要です。次に、プロジェクトのconfig.rbファイルでgithub.inから最新の圧縮バージョンのsusyをダウンロードしました。圧縮されていない圧縮バージョンのsusyのrequireを設定しました。

そして私のscssファイル内：

私が設定したページ全体のラッパーdivで：

Bleed は、Eric がここに投稿した mixin です。そこまでは、すべてが順調に見えます。susy グリッドの背景を取得し、bleed mixin を使用すると、要素がページ幅全体に引き伸ばされます。しかし、「スパン列」コードキットを追加しようとすると、コンパイル時にエラーが吐き出されます:

_layout.scss の susy に関連するコードは次のようになります。

圧縮されていないzipファイルだけにリンクするのではなく、ターミナルにもsusyをインストールする必要がありますか、それとも物事を進めるために最善を尽くす必要がありますか。コンパイル時に何がエラーを引き起こしているのかまだ少しわかりませんか? 私の使用コード？コードキット？スージー？誰かが物事を機能させる方法のヒントを持っているなら、それはいいでしょう。前もって感謝します。r.

スージーでサイトをモックアップしようと必死になっています。明らかな何かが欠けているのではないかと心配していますが、Susyグリッドにアイテムをネストすると、各列のパーセンテージの幅とマージンがわずかにオーバーシュートし、合計が100％を超えて次の行に折り返されるように見えます。次の例では、＃main_headernavは12列のうち8列にまたがるように設定されており、その中の各liは8列のうち2列を満たす必要があります。各liには、以下のように計算されたスタイルがあり、合計で100％を超え、最後のアイテムが折り返されます。

これは問題のある例です：

そしてSASS：

OS：Ubuntu 12.04
Rubyバージョン：ruby 1.9.3p0（2011-10-30リビジョン33570）[i686-linux]

を介してSusyをインストールしようとするとgem install susy、ターミナルから次の応答が返されます。

ERROR: While executing gem ... (NoMethodError)
undefined method 'size' for nil:NilClass

Google/Stackoverflow検索は今のところ私を助けていません