2

我正在神奇地导入我的精灵：

// 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

我想为每个精灵添加自定义样式。我设法通过在魔法导入之前声明一个类来添加所有精灵共有的样式（魔法导入似乎为每个精灵扩展了这个类）：

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

但我也想将样式单独应用于每个精灵。例如。我想用min-width而不是width.

作为临时解决方案，我手动列出了所有精灵名称：

=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，魔术导入会调用每个精灵类？

4

1 回答 1

3

您可以使用函数检索名称列表sprite-names($map)，如下所示：

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

Compass$<map>-sprites在导入图像 ( @import "<map>/*.png") 后创建精灵图。

于 2013-08-07T00:22:30.553 回答