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

Question

我期待着做以下工作，我似乎无法弄清楚如何没有相当数量的小提琴。

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

我创建了我原来的黑色图标设置罚款和文件夹中已包括他们现在icon/*.png

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

的问题，这是我的图标将被命名为像这样black-add和white-add那里我真正想要的是icon-add，使我没有改变我的主题@import icon-sprite(add)线，我只是包括顶部的正确sprites/_black或sprites/_white高级主题sa ss文件。

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

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

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

澄清

当前文件夹结构UPDATE。

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 

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

你也可以“读”的文件结构“为添加图标蓝色主题“

Answer 2

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

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

考虑到该文件结构，你可以有一个文件夹在您的样式表叫精灵，然后里面，对于每一个风格模板上海社会科学院。例如。你将有：

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

的文件是除了相应变化的部分相同标记为[颜色]：

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

.[color] 
    @include all-icon-sprites 

然后，你会希望有两个文件编译，然后导入。 你必须小心，因为在编译之前将它们合并可能导致青菜加入一些选择和消除分离。我在轨所做的是有一个明显的CSS导入编译的版本，而不是使用青菜导入指令将它们合并：

/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 

这当然有一个缺点，必须将图标嵌套在设置颜色的父项下。这很烦人，但考虑到你会有魔法精灵世代，这并不可怕。

注：堆栈溢出一直对我非常有帮助，现在我想回到贡献。如果这有帮助，请考虑投票。