問題タブ [susy]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
53 参照

susy-compass - Div がグリッドを確認していません。8 列のグリッドを定義し、要素は 4 列にバインドされています。スージー

div がグリッドと一致しません。これは 8 つのコンテナー グリッドであり、要素に span(2) を指示すると、グリッドが 4 であるかのように動作します。これは、$susy でグローバル グリッドを定義していないためですか?

いくつかのコンテキスト コード:

まず、コンテナ グリッドを定義しました。

次に、それをhtmlに追加しました:

次に、css で div をネストしました。

そしてそれをhtmlに追加しました

編集:修正済み(子要素でもコンテキストを定義する必要があります。なぜですか?必要なグリッド量に応じてスパンを設定できる場合、このwith-layoutとコンテキストに続くhokey pokeyのポイントは何ですか?親要素からコンテキストを読み取るのでは、susy のポイントは何ですか?)

これが結果です

0 投票する
1 に答える
99 参照

sass - スージー。固定レイアウトの列のマージンが正しくない

Susy で固定レイアウトを作成していますが、コンテナー内にネストされていることを指定しても、2 番目の列に右マージンがある場合、この問題に固執しています。

コデペン

HTML

CSS

0 投票する
2 に答える
138 参照

sass - susy sass と異なるガター

私はこのsusy設定を持っています:

場合によっては、1/4 の代わりに別のガターが必要になることがあります。

たとえば、画像を参照してください。

ここに画像の説明を入力

そしてコード:

私は成功せずにこれを試しました:

私はそれを修正する方法を見つけましたが、それが正しいかどうかはわかりません

ありがとう

0 投票する
1 に答える
116 参照

html - 要素が並んでいない (Complex Grid) スペースはあるが、あたかも存在しないかのように機能する

相対位置と絶対位置の使用を最小限に抑えて複雑なレイアウトを実行する際に問題が発生する。

これが私のレイアウトです:

ここに画像の説明を入力

私のすべての要素は、1 つの問題だけが並んで座ったまま浮いています。2 行目の要素 (CTA要素) がborder img?

これは、高さを設定するとどうなりますかborder img

明確にするために:

ドムはborder imgと の間main_sidebarにあるようなものですCTA_top_container.

  1. メインサイドイメージ
  2. main_heading_container
  3. メインサイドバー
  4. border_img
  5. CTA_トップコンテナ
  6. CTA_Button_relative

最後に:

ボーダー img を div (または susy's last) として右にフローティングし、60% 幅として設定background-imageして div の左側に配置するか、相対コンテナー内に絶対位置の img をネストして左に微調整するなど、いくつかのアイデアがあります。 、しかし、私はレイアウトの流動性を破壊することを恐れています(それはsusy流動グリッドの中にあります)。

何かご意見は?

0 投票する
1 に答える
55 参照

sass - Susy 数学は常に要素を大きくしすぎます

Susy を使用しようとしていますが、望ましいグリッドを作成できません。ガターが要素の前ではなく後に来る固定ガターグリッドが必要です。私はそれを機能させることができませんでした。何をしても要素が大きすぎて、最後の列が次の行に落ちているようです。

この要点を参照してください: http://sassmeister.com/gist/6ebf5ec14f697f8d137c

この基本的な 3 列のレイアウトでは、各 1/3 幅の列の幅が 35% を超えています。私は何が欠けていますか?

0 投票する
1 に答える
309 参照

html - Susy のガター幅の問題

24 Susy 列グリッドがあります。それぞれが 6 列 (行あたり 4 つ) にまたがるいくつかのボックスを作成しようとしていますが、幅が 24 列の幅の広いコンテナーを使用して、それらの周りにガターを追加したいと考えています。残念ながら、私が何をしようとしても、それを機能させることはできません。ガターに対応するために柱の幅が調整されていないようです...スージーがそうすべきだと思っていましたよね?私はこれらすべてに慣れていないので、多くの記事や投稿を読んだが、この答えを理解できないので、あなたができる助けは大歓迎です.

コードは次のとおりです。

それ以外の場合はフォーマットを無視して、コーディングを続けます:) (4番目の項目がノックダウンされていることがわかります): http://i.stack.imgur.com/5tmWp.jpg

0 投票する
2 に答える
593 参照

sass - スパン ミックスインで省略構文のガターが無視される

susy のグローバル設定を設定しました。

ガターを数スパンオーバーライドしたい

生成されたcss

私もこれらを試しましたが、これらも機能していないようです

&

0 投票する
0 に答える
105 参照

css - 側溝が作成されていません

最近、Sass と Compass を使用して新しいプロジェクトを作成しました。基本的なセットアップを使用しようとしました:

すべてのページに Susy をインポートしますが、ガターは表示されません。

マージンは自動計算されると予想していましたが、出力を確認すると、Margin-right と Margin-left が作成されていません。

出力:

ここで何が欠けていますか?