css - 如何扩展 sass/compass 库

Question

我的主要目标是向这个 compass 添加内置的 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; 
}

并添加此视网膜混合 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 它不识别任何变量和常量(好像我传递的参数不正确)

我的问题是:

1. 我应该在哪里添加我的新 mixin？ (将它添加到内置文件 _sprite-img.scss 似乎是错误的做法，因为我不想更改 compass 的内部文件)。将其添加到我的文件中似乎无法正常工作。
2. 为什么不起作用？我怎样才能让它发挥作用？

元素是用 grunt/bower/yo 等构建的。

Answer 1

我找到了解决这个问题的好办法:

我正在使用这个简单的 mixin 来获取新的 sprite 位置:

/* 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;
}