grunt-sass calling a mixin twice results in error

Question

I run into the following oddity ....

I have a sprite image generated using grunt-spritesmith). Further .. I have a mixin, called sprite, which gives me the position, height and width based on a var which is passed as argument.

If I call the mixin once, it works. If I call the mixin twice with the same variable, it comes up with the following error:

mixintwice.scss:15: error: 
required parameter $x is missing in call to mixin sprite

I put toghether a very small file - mixintwice.scss - which reproduces the problem:

$somespriteimage: 197px 0px -197px 0px 16px 16px 1068px 50px '../../../../img/sprite.png';

@mixin sprite($x, $y, $offset_x, $offset_y, $width, $height, $total_width, $total_height, $image) {
        //background: image-url('sprite.png') no-repeat;
        background-position: $offset_x $offset_y;
        height: $height;
        width: $width;
    }

    .firstclass {
        @include sprite($somespriteimage...);
        position: absolute;
    }
    .secondclass {
        @include sprite($somespriteimage...);
        display: inline-block;
    }

The css output from the above (with the secondclass include commented out):

.firstclass {
  background-position: -197px 0px;
  height: 16px;
  width: 16px;
  position: absolute; }

.secondclass {
  display: inline-block; }

When I do not comment out the second include, the above error is the result. What could be wrong?

For clarity I also added my package.json here:

"devDependencies": {
    "grunt": "^0.4.4",
    "grunt-contrib-jshint": "~0.6.5",
    "grunt-contrib-nodeunit": "~0.2.2",
    "grunt-contrib-uglify": "~0.2.7",
    "grunt-contrib-concat": "^0.3.0",
    "grunt-contrib-clean": "^0.5.0",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-rename": "0.0.3",
    "grunt-bake": "^0.3.8",
    "grunt-usemin": "^2.1.0",
    "grunt-useref": "0.0.16",
    "grunt-msdeploy": "^0.1.2",
    "grunt-filerev": "^0.2.1",
    "grunt-sass": "^0.12.1",
    "grunt-spritesmith": "^2.1.0"
  }

score 1 · Accepted Answer · answered Jun 06 '14 at 09:30

Your CSS should be

$somespriteimage: 197px 0px -197px 0px 16px 16px 1068px 50px '../../../../img/sprite.png';

@mixin sprite($sprite) {
    //background: image-url('sprite.png') no-repeat;
    background-position: nth($sprite, 3) nth($sprite, 4);
    height: nth($sprite, 6);
    width: nth($sprite, 5);
}

.firstclass {
    @include sprite($somespriteimage);
    position: absolute;
}
.secondclass {
    @include sprite($somespriteimage);
    display: inline-block;
}

The issue with the example you posted is it is not extracting the information from the $sprite variable but expecting the variable to expand to all of the parameters.

An alternative solution would be to use the built-in sprite mixin returned with the template which achieves the same result as the mixin I posted above.

I'll try that again, but I already did try that and constantly ran into an error that the nth function did not work .. it couldnt find the nth element ... I'm using grunt-sass and libsass to compile. — Paul0515, Jun 07 '14 at 13:01
I tried your first suggestion and it indeed works perfectly! Thanx!! — Paul0515, Jun 08 '14 at 15:30

grunt-sass calling a mixin twice results in error

1 Answers1