sass - compass Sprite : applying individual styles to every sprite class without writing out each sprite name manually

Question

我是 magic-importing我的 Sprite :

// Creating a concatenated sprite image out of all sprites in the "/images/sprites/" folder
$sprites-layout:  vertical
@import           sprites/*.png

$sprites-sprite-dimensions: true  // Image width and height will be applied to all sprite classes

+all-sprites-sprites      // Generate all sprite classes

我想为每个 Sprite 添加自定义样式。我设法通过声明一个类 添加所有 Sprite 通用的样式之前 魔法导入(魔法导入似乎为每个 Sprite 扩展了这个类):

.sprites-sprite                   // This code will be applied to all sprite classes
  @extend         %inline-block

但我也想对每个 Sprite 应用单独的样式。例如我想用 min-width而不是 width .

作为临时解决方案，我手动列出所有 Sprite 名称:

=sprite-custom-styles($item)
  +sprites-sprite($item)
  padding-left: px(sprites-sprite-width($item) * 1.3)
  min-width:    sprites-sprite-width($item)

@each $item in foo, bar, baz, quux
  .sprites-#{$item}
    +sprite-custom-styles($item)

这很麻烦，我想自动执行此操作。

也许魔术导入会创建一个我可以使用的名称列表？或者，也许我可以定义一个具有特定名称的 mixin，魔术导入会在每个 Sprite 类上调用？

Answer 1

您可以使用函数 sprite-names($map) 检索名称列表。 ，像这样:

@each $item in sprite-names($sprites-sprites)
  ...

compass 创建 Sprite map $<map>-sprites导入图像后 ( @import "<map>/*.png" )。