4

我已经生成了自动精灵类

@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)
4

1 回答 1

4

以下作品。关键是引用父母选择器。

萨斯：

@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 compass 中精灵的选项，使其包含引用父选择器&？

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

更新 2

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

于 2012-04-18T21:57:47.943 回答