I'm using compass to generate my icons and their hover states. The active state is the same as the hover state, and I'd like to keep my sprite map from being bloated with duplicate icons. Is there any way to make it add an active class to the same coordinates as the hover state?
@import 'sprites/*.png';
@include all-sprites-sprites;
generates:
.sprites-left {
background-position: 0 -16px;
}
.sprites-left:hover, .sprites-left.left_hover, .sprites-left.left-hover {
background-position: -18px -16px;
}
I'd like to add
.sprites-left.active {
background-position: -18px -16px;
}
This is as close to a solution as I could come up with.
@import 'sprites/*.png'; // sprites to include
@include all-sprites-sprites; // creates all sprites
// Manually extend each to add active states.
.sprites-engaged.active{ @extend .sprites-engaged:hover; }
.sprites-married.active{ @extend .sprites-married:hover; }