Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sass mixin for sprite use

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #37581
    ameego
    Participant

    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

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.