css - コンパス スプライトのホバー状態

Question

コンパスを使用していますが、コンパス スプライトは問題なく動作しています。ページが読み込まれ、コンパスで生成されたスプライトを使用して画像が表示されます。私の質問は、これらにホバーを設定するにはどうすればよいですか? 私はコンパスを初めて使用するので、これがどのように機能するのか理解できず、コンパスのドキュメントは役に立ちません。

Answer 1

このようにスプライトシートを手動で作成する必要があります...

$sprite-map: sprite-map("your_sprite_folder_here/*.png")

i
    background: $sprite-map
    display: inline-block


@each $icon in sprite_names($sprite-map)
    .icn-#{$icon}
        background-position: sprite-position($sprite-map, $icon)
            +sprite-dimensions($sprite-map, $icon)

次に、そのフォルダーに 2 つのスプライトがあるとします... cats.png と cats-hover.png それらを使用するには、i 要素を使用します (これをクラスまたは必要なものにすることができます)。

<i class=".icn-cats"></i>

ホバーを追加するには...

.icn-cats
    &:hover
        background-position: sprite-position($sprite-map, cats-hover)

ホバー状態を自動的に生成する方法があるとほぼ確信していますが、それを理解するのに多くの時間を費やしていません。