コンパスモジュールUtilitiesSpritesスプライトmap_html/css_WEB-ITnose

css スプライトは、css エルフまたは css スプライト とも呼ばれ、背景画像をステッチするテクノロジーです。 CSS スプライト画像を使用すると、ページリクエストの数が減り、画像が占めるバイト数が減るため、ページのアクセス速度が向上します。しかし、パズルやその後のメンテナンスのコストが比較的高いという批判もあります。多くの開発者が CSS スプライト画像の使用を怠っているのはまさにこのためです。

コンパスプロジェクトを設定します

$ compass init

対応するディレクトリと設定ファイルが生成されます。画像ディレクトリの下にロゴ ディレクトリを作成し、結合する必要があるアイコンを保存します。プロジェクトのディレクトリ構成は以下の通りです:

- sass<br /> |-- icons.scss<br /> |-- screen.scss- stylesheet- images |-- logo

config.rb ファイル構成は以下の通りです:

1 http_path = "/"2 css_dir = "stylesheets"3 sass_dir = "sass"4 images_dir = "images"5 javascripts_dir = "javascripts"6 7 relative_assets = true // 使用相对目录8 line_comments = false // 关闭行注释

スプライト画像を結合

すべてのスプライト画像スタイルを出力

新規ファイルを作成アイコン.scss screen icons.scss を .scss に導入します。

スプライトを icons.scss に導入します: @import "compass/utilities/sprites"

画像ファイル内のサブディレクトリのロゴ: すべての画像をここに配置します。 (将来他の画像と区別しやすくするため)

icons.scss ファイルにロゴ ファイルを導入します: @import "logo/*.png"; (*ロゴ ディレクトリ内のすべてのファイルを導入します)。

1 @import "compass/utilities/sprites"; // 加载compass sprites模块2 @import "share/*.png"; // 导入share目录下所有png图片3 @include all-share-sprites; // 输出所有的雪碧图css

生成されたコードでは、.logo-sprite はスプライト イメージの基本クラスです。生成される各スプライト イメージのデフォルトのクラス ルールは、.Directory name-picture name です。

は単一のスプライトスタイルを含む

rreeecssのコンパイルされたCSSは次のとおりです。コンパスのマジック エルフ セレクターを使用すると、各状態のアイコンをインテリジェントに結合し、対応する CSS を出力できます。これを使用するときは、特定のルールに従ってアイコンに名前を付ける必要があります。例:

1 @import "compass/utilities/sprites";  // 加载compass sprites模块2 @import "share/*.png"; // 导入logo目录下所有png图片3 .main-logo{4  @include logo-sprite("img1");5 }

コンパイルされた CSS は次のとおりです:

1 .logo-sprite, .main-logo {2  background-image: url('../images/logo-sd097a30ac3.png');3  background-repeat: no-repeat;4 }5 .main-logo {6  background-position: 0 0;7 }

非表示の logo.scss コマンド ラインを呼び出します:

img1.png            // 默认状态图标img1_hover.png     // hover状态图标img1_active.png     // active状态图标

$logo-sprite-dimensions

: 出力CSSを制御するために使用されます画像サイズに基づいて、対応するクラス名の css 属性に幅と高さを追加する場合。

$logo-layout

: 結合された画像のレイアウトを変更します。

--デフォルトは縦横です。

--斜めの斜めのレイアウト。

--スマートな省スペースレイアウト

 1 .logo-sprite, .main-logo { 2  background-image: url('../images/logo-sd097a30ac3.png'); 3  background-repeat: no-repeat; 4 } 5 .main-logo { 6  background-position: 0 0; 7 } 8 .main-logo:hover, .main-logo.img1-hover { 9  background-position: -120px 0;10 }11 .main-logo:active, .main-logo.img1-active {12  background-position: -60px 0;13 }

compass sprite 'images/logo/*.png'