巨人の肩の上に登る

先人の積み重ねた発見に基づいて、なにかを発見しようとすることを指す。

Compass の CSS sprite で class を extend しても表示されないとき

Compass は CSS の Framework です.
SASS(SCSS) 記法で書いて,自動でCSSに変換してくれたりします.

汎用的な CSS パターンが class で容易されていたり,CSS sprite 用の画像生成とclassの生成やファイルの圧縮とかもやってくれます.


今回,以下のコードで SASS記法 で CSS sprite をやっていました.(ん、なんかシンタックスハイライトがおかしいな.)

@import "PATH_OF_IMAGES/*.png"
@include all-DIR_NAME-sprites

まず,CSS sprite したい画像を任意のディレクトリに入れてあげます.
そして,そのディレクトリまでのパスを,PATH_OF_IMAGES に書きます.

次に,2行めの DIR_NAME に先程のディレクトリ名を指定します.
こうするだけで(compass watch していると),画像の生成と css class の生成を行ってくれます.
すばらしい!

他にもやり方はあるので,詳しくは公式サイトを参照して下さい.

class は extend で継承してあげればいいです.
例えば,div#hoge に画像に hoge_bg.png という画像を指定したいときは,以下のようになります.

div#hoge
    @extend .DIR_NAME-hoge_bg

CSS sprite 用の class は,”ディレクトリ名-ファイル名” という感じで生成されています.


それでは,本題の今回発生した問題である「継承したclassが反映されない」問題についてです.

今回はメニューとかで良くやる、Active 用の画像(まあ濃い画像ですね)を hover および Active 時に適用させ,それ以外のときは Inactive 用の画像(うすい画像ですね)を表示するケースでした.

デザイナーさんに容易していただいた画像が,下記の2枚でした.

hoge.png          // Active
hoge_hover.png    // Inactive

細かい詳細は省きますが,下記のように SASS で画像を指定していました.

div#hoge
    &.normal
        @extend .menus-hoge
    &:hover , &.active
        @extend .menus-hoge_hover

ところが,active class に画像が適用されませんでした...

試行錯誤した結果ですが,ファイル名の末尾に _hover の名前がつく画像は,Compass が自動で :hover に指定してくれるみたいです.
そのため,extend できないようです.
stackoverflow にも 記述がありました.


hover かつそれ以外にも画像を適用したい場合は,
末尾を _hover にしないほうがいいようです.