Susy を使用して、マークアップの順序とは異なる順序でレイアウトを作成することはできますか?

私のマークアップは次のようになります。

このマークアップは、直線的な形式 (コンテンツ、サイドバー、サイドバー) で表示されるモバイルに最も適しています。

デスクトップですが、サイドバー、コンテンツ、サイドバーを提示したいと思います。

私の $susy マップは次のとおりです。

私はもう試した

と

私はこれらのスタイルを持っています:

グリッド アイテムが正しく並んでいます。この場合、それぞれ<li>が 8 つの列のうちの 2 つにまたがっていますが、上記のようにグリッドの背景表示をオンにすると、次の出力が得られます。

なぜこれをやっているのですか？確かに、8 つの列が表示されているはずですか?

ありがとう、ニール

更新 1:

だから、background-sizeアウトされているステートメントは、このように間違って出力されていますbackground-size: 8.47458%, 100% 1.5;

何らかの理由で、ベースラインの高さの設定を最後に追加しているようです。$base-line-height変数を7.5のような奇妙なものに 変更することでこれを確認しました。これにより、出力が次のように変更されます。background-size: 8.47458%, 100% 7.5;

初期ベースラインの高さ設定を含む私のコードのもう少しは以下の通りです:

明らかな理由もなく、行の高さがここに追加されている理由はありますか?

Sass、Compass、および Susy を実行しています。最新バージョンにアップグレードしました：

非推奨の完全な警告は次のとおりです。

「compass compile --trace」を実行しましたが、追加情報は追加されませんでした。問題がどこにあるかを見つける方法を知っている人はいますか。私の理解では、コンパスかスージーの可能性があります。お知らせ下さい。

これは私のsusy構成です

テストコード:

コンパイル後、何も返されません...

または

次のエラーが表示されます:無効な null 操作: "15.75092% plus null"

どうしたの？

Susy がダウンしたと思ったのですが、これで数時間苦労しています。これまでこの問題を経験したことがないので、私も信じられないほど愚かだと感じています。おそらくボックスモデルの誤解ですが、私が困っているのはここです。

コンテナ div を設定しました。その中に、コンテンツ用に 9 列の #main div と 3 列のサイドバーがあります。#main div の背景は白いので、周囲にパディングが必要ですが、パディングを追加するとレイアウトが崩れ、サイドバーが下に押し込まれます。

パディングなし:

パディングあり:

私のhtml構造は次のとおりです。
コンテナ
+メイン
++コンテンツ（@include span（9））
++サイドバー（@include span（last 3））

また、html と susy 設定の両方でグローバルにボーダー ボックスのサイズ設定を設定しています。width: 100% と box-sizing: content-box を #main div に追加すると、これは機能しますが、コンテナーの右側が広くなり、その上下の要素を押しのけます。それに追加します。これはある意味では機能しますが、私の望ましい結果ではありません。#main div を同じ幅のままにする必要がありますが、左右にパディングを追加できるようにします。

私が言ったように、これは私にとって新しい問題です。私は Susy でいくつかのサイトを構築しましたが、これまでこの問題に遭遇したことはありませんでした。

更新 1: コンテンツ div とサイドバー div にパディングを追加すると機能しますが、私のページの 1 つで同じことを行うコンテンツ div に画像ギャラリーがあり、行の 3 番目の項目が一番下に落ちます。

更新 2: 一日中考えて取り組んだ結果、列幅が固定された固定サイトであることに関係しているという結論に達しました。固定幅のコンテナでもdivの幅を%で設定するとレイアウトが崩れません。面白い。「静的な」数学出力を使用して Susy をそのように動作させる方法があるかもしれませんが、私にはわかりません。

Gulp経由でBundlerを使用してSusyとBreakpointsをインストールしようとしています。どうすればいいですか？

Susy docs では、次のように述べています。

1) gem ファイルに以下を記述します。

2) config/application.rb に以下を記述

3) 次に、コマンド ラインで次のコマンドを実行します。

私はこれをすべてやりました。私のgulpファイル（完全なファイルはこちらを参照）には、次のものがあります。

しかし、gulp を実行すると、次のように表示されます。

[14:53:18] frontend/dist/js/main.js がリロードされました。

[14:53:18] frontend/dist/scripts/main.min.js がリロードされました。

[14:53:18] gulp-ruby-sass stderr: OptionParser::NeedlessArgument: 不必要な引数: --sourcemap=none バックトレースに --trace を使用します。

[14:53:18] gulp-notify: [Gulp 通知]

[14:53:18] 592 ミリ秒後に「スタイル」が完了

[14:53:18] 「デフォルト」を開始しています...

[14:53:18] 6.02 μs 後に「デフォルト」を終了*

CSS はコンパイルされますが、次のエラー メッセージが表示されます。

Gulp を使用して Bundler 経由で Susy とブレークポイントを実行できるようにするには、どうすれば修正できますか?

ありがとう！

私は自分の Rails プロジェクトで Susy 2 を使い始めましたが、今はそれを php プロジェクトで使いたいと思っています。環境を制御するためにrbenvを使用して、sass-3.4.11、compass-1.0.3、およびsusy-2.2.2をインストールしました。scss ファイル チェーンの先頭に compass と susy をインポートしました。

作業中の Ruby プロジェクトから次のコードを php プロジェクトに貼り付けました。

コンパイラは、コンテナー、列などにエラーとしてフラグを立てます。これは、border-box-sizing、enstitute-baseline、および span(12 of 12) を使用しています。$susy: () はバージョン 2 の一部ですよね? それを機能させるためにphpプロジェクトで他に何かしなければならないことはありますか? 別のphpプロジェクトでバージョン1を使用しています。

それが違いを生む場合、これは私のコンパイルステートメントです：

PHPStorm IDE を使用して呼び出しています。

アップデート

問題があるのは、IDE、PHPStorm である可能性があります。ステートメントにエラーがあるとフラグを立てていますが、コンパイラは文句を言っていません。私はサイトをリファクタリングする方法があり、混乱しているので、Susy が機能しているかどうかわかりません。別の JetBrains IDE である RubyMine も使用します。コードについては文句を言いません。

更新 2

$susy: コードのコメントを外すと、IDE はコンパイラを実行しません。具体的には、コンテナ、列などの後のコロンが好きではありません。

アップデート 3

問題文をコメントアウトして、サイトのリファクタリングを終了しました。うまくレイアウトされているように見えます。バージョン 2 より前の変数がいくつか定義されています。