compassのcss-spriteを利用する
準備
images/iconsというフォルダを作っておいた上で(iconsの部分はどんな名前でもよいが、spriteにしたい画像はすべてこのフォルダに入れる必要がある)、使いたいscssファイルの冒頭に以下を記述する。上2行は必須で、3つ目はAかBのどちらかを指定する。Aなら上2行の直後に、Bなら利用したい場所で呼び出す形をとる。なお、compass-css-spriteはpngのみ。jpgは対応していない。
|
1 2 3 4 5 6 7 8 |
@import "compass/utilities/sprites"; @import "{FOLDER-NAME}/*.png"; // A: スプライトマップ全体に必要なすべてのcssを書き出す場合。※1 @include all-{FOLDER-NAME}-sprites; // B: 必要なスプライトを個別に書き出す。※2 @include {FOLDER-NAME}-sprite( pngの名前 ); |
@include all-icons-spritesの場合
sprite画像と個別画像のすべてのcssが書き出される。クラス名はimages/iconsに配置されたpngの名前と関連づけられ、.icons-{pngの名前}となる。スプライト画像は自動で作成され、使いたい場所でクラスを指定する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.icons-sprite, .icons-arrow, .icons-box-add, ....{ background: url('/images/icons-****.png') no-repeat; } // iconsに入っている画像の数だけspriteが展開されるので // このクラスをhtmlで指定して使う。 .icons-arrow{ background-position: 0 115px; } .icons-box-add{ background-position: 0 300px; } .icons-***{ background-position: 0 -200px; } ... |
@include icons-sprite( )の場合
spriteを利用したい場所で初めて呼び出す形をとる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ul{ padding: 0; margin:0; list-style-type: none; li{ **** &::after{ content: ""; *** @include icons-sprite(arrow); // ここで初めて呼び出す。arrowの部分はpng画像の名前 width: icons-sprite-width(arrow); // 幅 height: icons-sprite-height(arrow); // 高さ } } } |
cssにコンパイルされると、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.icons-sprite, .arrow{ background: url('/images/icons-****.png') no-repeat; } .arrow{ background-position: 0 115px; width: 16px; height: 16px; } li::after{ content: ""; background: url('/images/icons-****.png') no-repeat; background-position: 0 115px; width: 16px; height: 16px; } |
コメント
コメントはありません。