Question

我遇到了以下奇怪的事情......

我使用 grunt-spritesmith 生成精灵图像。另外..我有一个名为sprite的mixin，它根据作为参数传递的var给出了位置，高度和宽度。

如果我将mixin调用一次，它就可以了。如果我使用相同的变量调用mixin两次，则会出现以下错误：

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

我给了一个非常小的文件 - mixintwice.scss - 它重现了这个问题：

$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;
    }

上面的css输出（第二类包括注释掉）：

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

.secondclass {
  display: inline-block; }

当我没有注释掉第二个包含时，结果就是上面的错误。可能有什么不对？

为了清楚起见，我还在这里添加了我的package.json：

"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"
  }

Answer 1

你的CSS应该是

$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;
}

您发布的示例的问题是它没有从$sprite变量中提取信息，而是期望变量扩展到所有参数。

另一种解决方案是使用与模板一起返回的内置sprite mixin，其效果与我上面发布的mixin相同。

grunt-sass调用mixin两次会导致错误

1 个答案: