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 にしないほうがいいようです.