Question

我的主要目标是在此罗盘中添加内置mixin sprite-position：

@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
  $x: ($col - 1) * -$width - ($col - 1) * $margin;
  $y: ($row - 1) * -$height - ($row - 1) * $margin;
  background-position: $x $y; 
}

并添加此视网膜mixin sprite-position-retina：

@mixin sprite-position-retina($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
  ...
  background-position: $x/2 $y/2; 
}

最终我想在我的文件中替换这行代码（这行正常工作）：

    background-position: sprite-position($sprites2x, $name);

使用此行（此行不起作用）：

    background-position: sprite-position-retina($sprites2x, $name);

问题在于它甚至不会识别sprite-position-retina和混合，如果我将@include添加到该行，则它不会识别任何变量和常量（就像参数I一样）我过世不是正确的事情）

我的问题是：

我应该在哪里添加新的mixin？（将其添加到内置文件_sprite-img.scss似乎是错误的做法，因为我不想更改指南针'内部文件）。将它添加到我的文件似乎不能使它工作。
为什么不工作？我怎样才能使它发挥作用？

项目是用grunt / bower / yo等构建的。

Answer 1

我找到了解决此问题的好方法：

我正在使用这个简单的mixin来获得新的精灵位置：

/* Converts sprite position to half of its original size (since we're 'squizing' the retina image by 2)*/
@mixin sprite-position-retina($spriteUrl, $name) {
  $spriteData: sprite-position($spriteUrl, $name);
  $x: nth($spriteData,1)/2;
  $y: nth($spriteData,2)/2;
  background-position: $x $y;
}

如何扩展sass /指南针库

1 个答案: