ホームページ > 記事 > ウェブフロントエンド > コンパスのリセットとレイアウト【Sassとコンパスの勉強メモ】_html/css_WEB-ITnose
コンパスのリセットとレイアウト【Sassとコンパスの勉強メモ】_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:00:341146ブラウズ
reset はブラウザの HTML のデフォルト スタイルをリセットできます。これは、各ブラウザがいくつかの要素を非常に異なる方法で解析するためです
スタイルをリセットすることで、スタイルのブラウザ互換性が容易になります
使いやすい
@ import "compass /reset"
layout いくつかの一般的なレイアウト関数があり、非常に便利だと思います。その他は、コンポーネントを記述するために非常によく使用されます
Sticky Footerこのモジュールは、フッターをレイアウトする必要性を提供します。それは貼り付けられます。次のツールに移動します。ページの下部。
このモジュールは主にページの下部に固定できるフッターをレイアウトするために使用されます。よく使用される機能であり、一致する HTML コードがあります
参考方法
@import "compass/layout/sticky-footer"
使用方法
@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")
对应的html结构
<body> <div id="root"> <div id="root_footer"></div> </div> <div id="footer"> Footer content goes here. </div></body>
公式バージョンはまだ利用可能です オンライン デモ http://compass-style.org/examples/compass/layout/sticky-footer/
特定の構文 Sticky-footer($footer-height, $root-selector, $root-footer-selector , $footer -selector)
$footer-height: フッターの高さ
$root-selector: ページテーマ ID
$root-footer-selector: 正式なフッター ID
$footer-selector: 本当にフッター
ストレッチストレッチは主に、親コンテナー内の子要素の位置を配置するために使用されます
公式のデモもいくつかあります http://compass-style.org/examples/compass/layout/stretching/
たとえば、次のレイアウトです
レイアウト機能搭載
stretch-y($offset-top, $offset-bottom) y方向の配置
stretch-x($offset-left, $offset-right) x方向の配置方向の位置決め
stretch($offset-top, $offset-right, $offset-bottom, $offset-left) x、y 方向の統合された位置決め
グリッド背景ハイブリッド コンポーネントにより、固定、流動的で伸縮性のあるグリッド レイアウト
これは CSS3 グラデーションを使用して実装されています
主にレイアウトのテストと校正に使用されると思います
実際、これは役に立たないと感じます、主に参照レイアウトとして使用されます
方法引用してそれを使用する方法を引用するには、ここにありますhttp://compass-style.org/reference/compass/layout/grid_background/