- This topic is empty.
-
AuthorPosts
-
April 11, 2012 at 12:02 am #37581ameegoParticipant
Hi guys,
I have decided to move to sass after watching Chris’s css pre-processing screencast. I am using it for few weeks now, I pretty like it.
I just wanted to share with you one of the mixin which I use for the sprite, and eventually get your input for a better way to proceed.
1°) At first, here is what I was doing :
@mixin sprite-1($x: 0, $y: 0) {
background-image: url(img/sprite-1.png);
background-position: $x $y
background-repeat: none
}.dummy-class {
@include sprite-1(50% -100px)
}.other-dummy-class {
@include sprite-1(50% -150px)
}The problem was that it was including in the output css, the background-image, background-repeat, each time whereas in regular css I would have included those properties this way :
.dummy-class,
.other-dummy-class {
background-image: url(img/sprite-1.png);
background-repeat: no-repreat
}So I starting feeling that this solution was smelling like shit. I wanted to find another way. I came up with this approach :
@mixin sprite($sprite-class, $x: 0, $y: 0) {
@extend .#{$sprite-class};
background-position: $x $y;
}.sprite-1 { background-image: url(img/sprite-1.png); background-repeat: no-repeat; }
.dummy-class {
@include sprite(sprite-1, 50%, -100px);
}.other-dummy-class {
@include sprite(sprite-1, 50%, -150px);
}In the output css, it gives :
.sprite-1,
.dummy-class,
.other-dummmy-class {
background-image: url(../img/sprite-1.png);
background-repeat: no-repeat;
}Sounds better but now it also include .sprite-1 which I basically do not use for styling, but only for being able to use @extend on this particular class to avoid the repetition.
1) What do you think of this approach ?
2) Any idea to make it better ?Thanks,
Robin -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.