aslansky / css-sprite

css sprite generator
MIT License
733 stars 55 forks source link

[Request] Multiple Sprite-Classes (Pseudo Elements) #35

Closed CREEATION closed 10 years ago

CREEATION commented 10 years ago

Aloha,

I would like to give pseudo elements a sprite background, but there is only one class which you can define and it does only target the whole element. Some sort of options like:

{
    // enable pseudo element classes generation
    'pseudo': {
        // if set, also apply the generated background-image attribute to '.sprite-b:before'
        'before': 'sprite-b',
        // same as above, just with ':after'
        'after': 'sprite-a'
    }
}

Where "sprite-b" and "sprite-a" are custom classes defined by the user. So when I set it to "sprite-b", the generated Sass would look like this:

$some-sprite: -5px -5px 64px 64px
$some-sprite-2: -5px -79px 64px 64px

=sprite-width($sprite)
  width: nth($sprite, 3)

=sprite-height($sprite)
  height: nth($sprite, 4)

=sprite-position($sprite)
  $sprite-offset-x: nth($sprite, 1)
  $sprite-offset-y: nth($sprite, 2)
  background-position: $sprite-offset-x  $sprite-offset-y

=sprite($sprite)
  +sprite-position($sprite)
  background-repeat: no-repeat
  overflow: hidden
  display: block
  +sprite-width($sprite)
  +sprite-height($sprite)

.sprite,
.sprite-b:before
  background-image: url('img/sprite.png')

Do you plan to integrate something like this? (I know my example configurations aren't the best :D) It would be really helpful :+1:

Thomas

CREEATION commented 10 years ago

I just saw the template option... I guess my request is obsolete then. :-( Although it would be nicer with some simple options :p

CREEATION commented 10 years ago

Aaaaand... gone again. Just use @extend .sprite (in my case) to apply the background-image in pseudo elements... sorry :-)