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

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

WBOY

リリース： 2016-06-24 11:32:33

オリジナル

1290 人が閲覧しました

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'

ログイン後にコピー