問題タブ [susy]

私はコーディングに苦労しているビジュアルデザイナーです。本題に切り込みます。以下に問題があります。

私が達成しようとしていること：

現在のジレンマを含む、目標 1 と目標 2 のスクリーンショットを以下にリンクします (私は初心者なので、まだスクリーンショットを含めることは許可されていません。

https://www.dropbox.com/s/libc4wp970xz3ms/Screenshot.png?dl=0

私が達成したかったのは、ナビゲーション バーを常に中央に配置することでした。ワイド (1300 ピクセル) にしました。白いコンテナーは小さくなり、その外側にあるものはすべて非表示に設定されます。

以下は私のコードです：

どんな助けや提案も大歓迎です。

フォーラムで回答と手がかりを探していますが、私のような問題を抱えているフォーラムが見つかりません。

ありがとうございました。

アンソニー

susy で固定位置要素を使用しているときに少し問題があります。位置が固定されている要素は、グリッドではなくビューポートを基準にしてサイズ設定されることを知っています。しかし、私はこの問題を解決する方法がわかりません。

問題を示すためにペンを作成しました。

http://codepen.io/emjay/pen/vEabNQ

これが私のsusy構成です：

そしてここに私のコード：

HTML:

SCSS:

ウィンドウが 1200px より大きい場合、サイドバーは定義された 3 列よりも多くのスペースを使用することがわかります。

誰かがそれを修正する方法を知っていることを願っています。:)

テーマのブレークポイントの設定について助けが必要です。基本的には簡単です：モバイル; タブレットとデスクトップ。ただし、問題は横向きとデバイスの解像度に関係しています。実際、これは私の変数とコード例です:

アプリケーションで使用している効率的なコードはありますか?

ありがとう

編集：これが役立つことがわかりましたが、それを適切に設定するには助けが必要です http://breakpoint-sass.com/

ナビゲーションにパイプ (|) スタイルを追加しようとしています。

私のsusyコードは @include with-layout(6 inside, true){ @include span(1); です。

&::before { content: " | "; を追加しました。}

しかし、 &:first-child { &::before { content: " "; を追加すると } }

ナビゲーションのすべてのインスタンスが最初の子ではないことを認識しません.htmlのすべてのアイテムを最初の子と見なします。これを修正するにはどうすればよいですか?

また、パイプをセパレーターとして表示する方法についての提案 (つまり、重要なナビゲーション項目の間) - 微妙な効果が必要なため、border-left を使用したくありません。

ありがとう、

ビクトリア

別の非常によく似た質問がすでに尋ねられています。

6 列の要素で構成されるギャラリーを設定しました。ただし、最初の要素がギャラリーの最初の 2 列にまたがるようにします。

gallery関数を2つオフセットする方法はありますか? 隔離してみました。また、要素に余分なパディングを追加しました.strapが、ギャラリーの最初の行がページの外に押し出されます。そして&:first-child、さまざまなフレーバーのセレクターも試しました。

現在、SUSY を使用して、作業中の Web サイト用のレスポンシブ グリッド システムを作成しています。

私の grid.scss ファイルは次のようになります。

ただし、別のデスクトップ 6 クラス内でデスクトップ 6 クラスを使用すると、ガター幅が、ネストされていないコンテンツの場合の半分になります。

すべてが列幅に応じてパーセンテージに基づいているため、これが発生する理由は理解していますが、これを上書きしたり、ネストされた DIV のスタイルを追加してガターを 2 倍の幅で使用したりするにはどうすればよいですか?

どんな助けでも素晴らしいでしょう。

ありがとう

私は新しいプロジェクトに取り組んでおり、grunt-contrib-sass の代わりに grunt-sass を使い始めました。コンパスも外しました。今の問題は、「susy」グリッドと「ブレークポイント」を追加する方法が見つからないことです。以前はこれを config.rb ファイルに入れていましたが、コンパスを使用していないため、もう使用していません。

だから私は自分のプロジェクトにすべてのsusyスタイルを追加しました。それはうまくいきますが、私の好みの方法ではありません。しかし、ブレークポイントを追加する方法が見つかりません。

これらを追加する方法はありますか？または、これにはコンパスを使用する必要がありますか?

私の悪い英語で申し訳ありませんが、あまり得意ではありません。

gulpタスク (デフォルト) を初めて実行するsassと、Bower パッケージでエラーが発生します。より具体的にはスージーについて。

エラー：

Susy bower パッケージは、私の bower.json ファイルから情報を取得して、gulp - bower で正常にインストールされています。ただし、デフォルトのタスクがsassタスクに到達すると、Susy が見つかりません。

スタイル.scss

gulpこれは、初めて実行したときにのみ発生します。このwatchエラーの後、タスクは停止/中断せず、その後も作業を続けます。（問題なくsassをコンパイルできます）。

しかし、それは少し乱雑に見えます。これを防ぐ方法についてのアイデアはありますか?

私の全体の gulpfile.js はここで見ることができます: https://gist.github.com/JeroenDelbrk/798d646af5cc2ad78da0

この質問とは関係なく、gulpfile を改善する方法に関するヒントも歓迎します。