[Request] Multiple Sprite-Classes (Pseudo Elements)
Closed this issue · 2 comments
CREEATION commented
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 👍
Thomas
CREEATION commented
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
Aaaaand... gone again.
Just use @extend .sprite
(in my case) to apply the background-image in pseudo elements... sorry :-)