Question

我用

生成自动精灵类

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

import和include会神奇地生成类：

.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

对于评论，似乎因为罗盘源代码而无法实现。因此，应该向Compass团队报告一个新的错误：github.com/chriseppstein/compass/issues

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

1 个答案: