問題タブ [semantic.gs]

グリッド システムとしてSemantic.gsを使用しています。ネストされた列の例に従って、可能な限りグリッドをたどりながら、必要なものを作成しようとしています。Semantic.gs の入れ子になった列のサンプル コードを考える:

HTML

以下

私の質問は、可能な限りグリッド システム (semantic.gs) に準拠しながら、ネストされた列の親にパディング (理想的にはガターと同じ幅) を追加するための最良の方法は何ですか? 注、私は 960px の固定レイアウトを使用しています。

これは、ベージュ色の親要素の左右のパディングで達成しようとしているものの例(Photoshop、上記のコードによるとは限りません)の画像です:

更新: Sandeeps の例に従って、これを行うことができましたが、960px グリッドを使用しているとは言いませんでした。ここに私の結果があります: http://bit.ly/M5fr5N .

Webページのグリッドを作成するためにsemantic.gsを使用しています。何をしても、「ガター」がないことに気付きました。つまり、CSS では、デフォルトを 20px のままにしているにもかかわらず、余白が 0 に計算されます。

そこで、一歩下がって、この非常に単純な公式の例を再現しようとしました。

http://semantic.gs/examples/fixed/fixed.html

私の試みの出力はここにあります：

http://jsfiddle.net/QXpcq/

ご覧のとおり、ガターはありません。マークアップは同じですが、出力 CSS は異なります。私の出力 CSS は常に 0 のマージンを示します。これはおそらく私の入力が例と異なるためだと思われるかもしれませんが、私が見る限り、そうではありません。次のように、SCSSを使用しています。

デモでは、CSS のリセット コードと、色などをスタイルする CSS を切り取っています。私を信じてください、フィドルでわかるように、それらは公式デモの正確なコピーアンドペーストです.

「グリッド」インポートは、グリッド ミックスインの公式ダウンロードです。私はそれを変更しませんでした。ここでの大きな謎は、なぜ同じマークアップと SCSS を使用しても異なる結果が得られるのかということです。

私のコンパイルプロセスが原因でしょうか？Scout アプリを使用して SCSS フォルダーを監視しています。それに対する変更をピックアップし、CSS にコンパイルします。

セマンティック グリッド システムを使用してレスポンシブ サイトを構築しています。ただし、特定の画面サイズに達すると明らかに起動するはずのメディア クエリには、何かが正しくありません。

Web サイトの例で私が意味することを参照します。たとえば、これを iPhone で表示すると、モバイル デバイスで単一の列構造に調整することになっている場合でも、Web バージョンのページ。これは、iPhone の Safari と Chrome の両方に当てはまります。ただし、RWD ブックマークレットを使用してさまざまな解像度での外観を確認すると、モバイル解像度で期待どおりに表示されます。また、皮肉なことに、デスクトップの Safari でページのサイズを変更すると、適切な画面サイズになるとそれに応じて調整されますが、Firefox では調整されません。

720pxに達したときに使用するメディアクエリは

ここでは的外れかもしれませんが、それが問題だと思います。しかし、これがsemantic.gs Webサイトから直接のものであることを考えると、私は必ずしも彼ら自身のコードに疑問を呈する専門知識を持っているとは思いません.

何が問題なのかわかりますか？

Semantic.gs を使用して流動的なレイアウトを実装し、LESS を使用していくつかのネストされた列を実装しました。しかし今、クライアントはレイアウトを修正することを決定しました。

grid.less の @total-width:100% という行をコメント アウトするだけでよいと思っていましたが、他の LESS ファイルで .row() mixin のある行でエラーが発生するようになりました。

これに対する回避策はありますか?

ここに grid.less の関連部分があります

LESS ファイルの問題のあるセクションは次のとおりです。LESS コンパイラは、エラー 'Compiler Errors variable @total-width is undefined (Line: 292)' を返します。これは、.row() 属性を持つ行です。