コンパスのリセットとレイアウト【Sassとコンパスの勉強メモ】_html/css

コンパスのリセットとレイアウト【Sassとコンパスの勉強メモ】_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:00:34

オリジナル

1144 人が閲覧しました

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/