指南针在相同的图标名称下为不同颜色的主题创建多个精灵文件

Question

我正在寻找执行以下操作，但如果没有大量的摆弄，我似乎无法弄清楚如何做。

我想为我的主题设置两个图标集。一黑。一白。我的主题有两种不同的配色方案可供您选择。灰色和蓝色。在灰色主题上，我想要黑色图标，在蓝色主题上，我想要白色。

我已经很好地创建了我原来的黑色图标集并将它们包含在一个文件夹中 icon/*.png

现在我想使用的是嵌套文件夹设置，其中我的图标位于以下文件夹 icon/black/*.png 和 icon/white/*.png

问题在于我的图标将被命名为 black-add 和 white-add 我真正想要的是 icon-add 这样我就不必更改我的主题 @import icon-sprite(add) 行，我只包括顶级主题 sass 文件中正确的 sprites/_black 或 sprites/_white。

是否有一些我缺少的配置允许我这样做？还是我以错误的方式解决这个问题？

我通过创建一个包含所有图标的通用 icon/*.png 文件夹，然后复制生成的 _icon.sass 文件并为黑白图标编辑它来解决这个问题。然后在我的灰色主题中包含“精灵/黑色”，在我的蓝色主题中包含“精灵/白色”。这行得通，但是当您想添加新图标时，它有点像 PITA。

这里的任何帮助将不胜感激！

更新澄清

当前文件夹结构。

themes/
    images/
        default/
            icon/
                black/
                white/
        blue/

config.rb

# $ext_path: This should be the path of the Ext JS SDK relative to this file
$ext_path = "../"

# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
# Generally this will be in a resources/sass folder
# <root>/resources/sass
sass_path = File.dirname(__FILE__)

# css_path: the directory you want your CSS files to be.
# Generally this is a folder in the parent directory of your Sass files
# <root>/resources/css
css_path = File.join(sass_path, "..", "css")

images_path = File.join(sass_path, "..", "themes", "images", "default")
generated_images_dir = File.join(sass_path, "..", "themes", "images", "default")
generated_images_path = File.join(sass_path, "..", "themes", "images", "default")
http_generated_images_path = File.join("..", "themes", "images", "default")
sprite_load_path = File.join(sass_path, "..", "themes", "images", "default")

# output_style: The output style for your compiled CSS
# nested, expanded, compact, compressed
# More information can be found here http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style
output_style = :compressed

# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
load File.join(File.dirname(__FILE__), $ext_path, 'themes')

重新读取我的配置文件，就像我想为 sprite_load_path 设置多个条目或取消“默认”连接。

Answer 1

您可以更改sprite base class，但这对您的个人@include 没有帮助。

目前尚不完全清楚您的整个项目的组织方式，但我建议您将图像文件夹层次结构与您的主题更接近，而不是图标的颜色。

/images
|
--/themes
  |
  --/grey
    |
    --/icon
      |
      -- add.png
  --/blue
    |
    --/icon
      |
      -- add.png

由于 Compass 使用路径中的最后一个目录作为地图名称，您可以使用@import "themes/grey/icon/*.png"，这将允许您使用@include icon-sprite(add)

您还可以将文件结构“读取”为“蓝色主题的添加图标”

Answer 2

我遇到的解决方案将@maxbeatty 解决方案与选择器的魔法生成混合在一起，以保持指南针的性感。基本上，每种样式都有一个 sass 模板，其中精灵具有相同的名称，并将选择器嵌套在每种颜色的不同类下。假设前面提到的文件结构：

/images
|
--/themes
  |
  --/grey
    |
    --/icon
      |
      -- add.png
  --/blue
    |
    --/icon
      |
      -- add.png

考虑到该文件结构，您可以在样式表中创建一个名为 sprites 的文件夹，然后在其中为每种样式创建一个 sass 模板。例如。你将拥有：

--/stylesheets/sprites
          |
          -- grey.sass
          -- blue.sass
          -- all.css (explained below)

除了对应的可更改部分标记为[颜色]之外，其他文件相同：

@import themes/[color]/icon/*.png

.[color]
    @include all-icon-sprites

然后您将希望编译并导入这两个文件。 您必须小心，因为在编译之前合并它们可能会导致 sass 加入一些选择器并消除分离。 我在 rails 中所做的是有一个 .css 清单来导入已编译的版本，而不是使用合并它们sass 导入指令：

/stylesheets/sprites/all.css：

/*
*= require_tree .
* Import the compiled versions of the sprites. 
* Prevents SASS from mixing them and applying the same sprite to all selectors
*/

这最终给了你类似的东西：

.blue .icon-home
.gray .icon-home

这当然有一个缺点，就是必须将你的图标嵌套在你设置颜色的父级之下。考虑到您将生成魔法精灵，这很烦人，但并不可怕。

注意：Stack Overflow 对我非常有帮助，现在我正在努力回馈。如果这有帮助，请考虑投票。