Feature Request: Customize prefixes for Sprite Magic Selectors

[ashleahhill]

The Magic Selector feature of Compass Sprites is great, but it forces the user to use a specific set of presentational classes, (or get twice the selectors they need on each sprite).

It'd be great if the user could modify the classes before the sprite is generated, more in keeping with Compass' General Philosophy

Example:

I want to use .is-hover, .is-active. ect. in my code. The way the magic selectors work now you'd need to write this for every sprite with states:

@import "my-buttons/*.png";

a {
    @include my-buttons-sprite('glossy');
    &.is-hover {
        @extend a:hover;
    }
    &.is-target {
        @extend a:target;
    }
    &.is-active {
        @extend a:active;
    }
}

And your output would be this:

.my-buttons-sprite, a {
  background: url('/my-buttons-sedfef809e2.png') no-repeat;
}

a {
  background-position: 0 0;
}
a:hover, a.is-hover, a.glossy_hover, a.glossy-hover {
  background-position: 0 -40px;
}
a:target, a.is-target, a.glossy_target, a.glossy-target {
  background-position: 0 -60px;
}
a:active, a.is-active, a.glossy_active, a.glossy-active {
  background-position: 0 -20px;
}

Which hurts the selector control feature (the name of the sprite is added back in), and makes the magic selector feature useless, since you're back to writing your own selectors.

It would be easier to use and and produce cleaner output if this was an option:

$my-button-sprite-magic-selectors: 'prepend';
$my-button-sprite-magic-selectors-prefix: 'is-, ui-state-';

@import "my-buttons/*.png";

a {
    @include my-buttons-sprite('glossy');
}

Outputting this:

.my-buttons-sprite, a {
  background: url('/my-buttons-sedfef809e2.png') no-repeat;
}

a {
  background-position: 0 0;
}
a:hover, a.is-hover, a.ui-state-hover {
  background-position: 0 -40px;
}
a:target, a.is-target, a.ui-state-target {
  background-position: 0 -60px;
}
a:active, a.is-active, a.ui-state-active {
  background-position: 0 -20px;
}

Or:

$my-button-sprite-magic-selectors: 'append';
$my-button-sprite-magic-selectors-suffix: '_';

@import "my-buttons/*.png";

a {
    @include my-buttons-sprite('glossy');
}

Outputting this:

.my-buttons-sprite, a {
  background: url('/my-buttons-sedfef809e2.png') no-repeat;
}

a {
  background-position: 0 0;
}
a:hover, a.glossy_hover {
  background-position: 0 -40px;
}
a:target, a.glossy_target {
  background-position: 0 -60px;
}
a:active, a.glossy_active {
  background-position: 0 -20px;
}

But still have:

@import "my-buttons/*.png";

a {
    @include my-buttons-sprite('glossy');
}

Outputting the current behavior as default.

[stereokai]

Try this: https://github.com/stereokai/instantsprites :)

[ashleahhill]

Interesting, I will have to try it out next week to see how configurable it is and how well it plays with compass watch or grunt-contrib-watch for updating and such.

[stereokai]

I don't know how to make it work through watch. Because of that, this script generates SCSS for Compass to digest, including the code that makes Compass generate the sprite image. But what it does do that Compass doesn't, is generate all the classes for each sprite and each sprite state (i.e. hover, down, etc. - it's up to you - the script will pick it up from the files automatically), so you don't need to do it all by hand. So basically you need to run the script, then copy the generated .scss file to your scss folder and then, Compass will do it's magic. The script is annotated all through-out, but if you don't understand it please feel free to contact me (preferably open an issue in my repo) :)

[stereokai]

Just wanted to let you know that I wasn't aware an earlier update had a syntax error in the generated Compass mixin. Fixed it and added some basic "caching", which saves even more manual work. I imagine that in the near future I'll port everything to Grunt.