問題タブ [susy-sass]
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.
css - Div は 1 つの行ではなく、susy グリッド システムの新しい行に移動します
3つの等間隔の中央のdivを含むsusyで12列のページを作成したいのですが、これを行うと
HTML :
サス：
3 番目の div は、この図のように新しい行に移動しますが、1 行にまとめたいと思います。
そして、私のCSSファイルには次のものがあります:
更新: 私の計算が正しければ 3*28.57143 + 7.14286*3 != 100 、それは約 107 ですが、なぜですか?
28.57143 は各 div の幅で、7.14286 はパーセンテージで表した右マージンです。
css - Susy ガター サイズ
Susyを使用するのは初めてです。アプリケーションにダウンロードしてインストールしました。Susy 2.2を使用しています
同じ幅 (50%) の 2 つの列を持つ単純なページ/グリッドを作成しようとしています。私が直面している問題は、各列の幅が 44.4444% しかなく、最初の列の幅margin-rightが 11.111% であることです。
HTML:
CSS:
デフォルトのガターサイズを小さくするにはどうすればよいですか? また、 が画面の中央に表示されるようにするborder-rightにはどうすればよいですか?log-in-section
susy-sass - Susy で流体グリッドを挿入する
問題なく使用して、次のグリッド レイアウトを複製できましたmath: static。ただし、流動的な幅を使用したいので、次のブレークポイントで変更する前に、小さな画面でデザインが縮小されます。
またはを使用して に切り替えてmath: fluid行を挿入しようとすると、% 幅が縮小し、グリッドが正しく整列しなくなり、各ブロックのサイズが異なります。margin-leftpadding-left
これは流体グリッドで行うことができますか? パーセンテージでは無理そうですが、他の単位ではどうでしょうか。マージン/パディングが % 幅に違いをもたらしたことに驚きました。使用するbox-sizing: border-boxと、それらは「表示された」サイズの内側にあると想定されていたからです。
この問題のデモはhttp://sassmeister.com/gist/83526e7319203138ace1にあります。
ありがとう！
sass - susy でガター幅を固定
ここで固定ガターの例を見つけました ( http://sassmeister.com/gist/7da95c41fff076dd7266 )。最初は本当にシンプルに見えました:
15pxを何かに変更するだけでいいと思っていましたが、そうではありません。私はそれを変更しようとしましたが、結果はありませんでした。gutter公式サイトで検索してみたのですが、 についてだけで、何も見つかりませんでしたgutters。違いはなんですか？ガターはどのように機能しますか？
パーセンテージの列が必要ですが、固定の 25 ピクセルのパディングが必要です。
css - ネストされた要素を適切に定義する方法は?
次のマークアップがあるとします。
のbody固定幅は次の910pxとおりです。
にbodyはarticle、2 つのネストされたdivs(.fooおよび.bar) で構成される要素があります。
この時点で、必要に応じて、.fooそれぞれ.bar6 つの列を使用します。これは、次のようにして簡単に実行できます。
bodyto@include containerとそれに続く要素 ( article) に別の要素が@include container直接含まれていても問題ありませんか?
Twitter Bootstrap では、acolは常に a の後に続く必要がありますrow。しかし、これは Bootstrap ではありません。スージーです。
Susy で、arowと aの同じ概念は何colですか? それとも@include span基本的に両方を行いますか？
css - Susy でガター幅を再定義できません
解決しました!! （下を参照）
明らかに、私は Susy の初心者です。すべてのドキュメントを読みます。Zell のチュートリアルの無料の章を読み、彼のブログ投稿のほとんどを読みました。たまたま他の情報源に目を通した。ガター幅の変更に関する情報はどこにも見つかりませんでした。
プライマリ グリッドのガター幅を変更しようとしましたが、変更しても何の反応もありません。私が見たすべての測定単位を試しました。それでも、何も起こりません！
コードは次のとおりです。
私も試しました：
と
と
と
と
あなたは絵を手に入れます。widthまた、サフィックスを削除して、値のバリエーションを無限に繰り返してみました。
何もない。
ネイサン。
なだ。
何を与える？
編集
コンテナ グリッドに関する CSS は次のとおりです。#grid
解決した
問題は、「ガター」ではなく「ガター」と書いたことです。
susy-compass - Div がグリッドを確認していません。8 列のグリッドを定義し、要素は 4 列にバインドされています。スージー
div がグリッドと一致しません。これは 8 つのコンテナー グリッドであり、要素に span(2) を指示すると、グリッドが 4 であるかのように動作します。これは、$susy でグローバル グリッドを定義していないためですか?
いくつかのコンテキスト コード:
まず、コンテナ グリッドを定義しました。
次に、それをhtmlに追加しました：
次に、css で div をネストしました。
そしてそれをhtmlに追加しました
