sass/compass: all-foo-sprites mixin 的嵌套包含

Question

我已经生成了自动精灵类

@import "icons/*.png";
@include all-icons-sprites;

导入和包含会神奇地生成如下类：

.icons-application_go {
  background-position: 0 -16px;
}

（对应icons/application_go.png文件）

但是，我需要包含我的精灵，以便生成的类看起来像这样

.x-btn-icon.icons-application_go {
  background-position: 0 -16px;
}

.x-btn-icon.icons-delete {
  background-position: 0 0;
}

我已经尝试过了

.x-btn-icon {
  @include all-icons-sprites;
}

但它会导致

.x-btn-icon .icons-application_go {
  background-position: 0 -16px;
}

.x-btn-icon .icons-delete {
  background-position: 0 0;
}

，因此选择 .x-btn-icon 的子元素，但不选择 class="x-btn-icon icons-delete" 的元素

现在，我有

.x-btn-icon.icons-add { @include icons-sprite(add); }

在我的 SASS 中。但我需要为每个项目手动执行此操作。我在这个集合中正好有 1000 个图标，所以这会很乏味:-)

有没有办法遍历所有图标名称（如“添加”）并输出

.x-btn-icon.icons-$foo { @include icons-sprite($foo); }

?

根据@cram1010 的建议，我也试过了

@import "icons/*.png";
$icons-sprite-base-class: "&.icons-";

.x-btn-icon {
  @include all-icons-sprites;
}

但我收到以下错误：

Invalid CSS after "": expected selector, was "&.icons-"
  (in /Users/pasc/projects/bss-io-demo/vendor/gems/bss-io-app/app/assets/stylesheets/bss.io.app.css.scss)

Answer 1

以下作品。密钥是referencing parents selectors。

萨斯：

@mixin all-icons-sprites {
  &.icons-application_go {
    background-position: 0 -16px;
  }
  &.icons-delete {
    background-position: 0 0;
  }
}

.x-btn-icon {
  @include all-icons-sprites;
}

被编译成以下 CSS：

.x-btn-icon.icons-application_go {
  background-position: 0 -16px;
}

.x-btn-icon.icons-delete {
  background-position: 0 0;
}

更新 1

似乎我误解了这个问题，因为您的 mixin 是自动生成的。

您是否尝试过更改$<map>-sprite-base-class option for sprites in compass，使其包含引用父选择器&？

$icons-sprite-base-class: "&.icons-";

更新 2

对于 cmets 来说，由于 compass 源代码，这似乎是不可能的。所以肯定应该向 Compass 团队报告一个新错误：github.com/chriseppstein/compass/issues