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

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 相同的结果。