指南針在同一圖標名稱下爲不同彩色主題創建多個精靈文件

我期待着做以下工作，我似乎無法弄清楚如何沒有相當數量的小提琴。指南針在同一圖標名稱下爲不同彩色主題創建多個精靈文件

我想爲我的主題設置兩個圖標集。一個黑色。一個白色。我的主題有兩種不同的配色方案可供選擇。灰色和藍色。在灰色的主題上，我想要黑色的圖標，我想要白色的藍色主題。

我創建了我原來的黑色圖標設置罰款和文件夾中已包括他們現在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或帶走的「默認」的加入。

來源

2012-07-31 Jamie Sutherland

您可以更改sprite base class但這不會幫助您與您的個人@include。

目前尚不完全清楚整個項目當前的組織結構，但我建議將圖像文件夾層次結構與圖標的顏色相比更接近主題。

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

由於指南針使用最後一個目錄中的地圖名稱的路徑，你可以@import "themes/grey/icon/*.png"這將允許您使用@include icon-sprite(add)

你也可以「讀」的文件結構「爲添加圖標藍色主題「

來源

2012-07-31 17:53:13 maxbeatty

感謝您的答覆。這是我認爲它應該是結構起初的一些圖像是這樣的。我看不出有什麼配置羅盤來支持這個結構來創建精靈的正確途徑。我將用我目前的結構更新我的問題並配置指南針。 – 2012-07-31 19:45:26

在更新我的崗位我想我看到我要去哪裏錯了。正是這種sprite_load_path = File.join（sass_path，「..」，「主題」，「圖像」，「默認」）引起多數民衆贊成我的問題。只是打開我的設置，以適應你的結構。但我認爲你已經明白了！ – 2012-07-31 20:01:26

我遇到的解決方案將@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

這當然有一個缺點，必須將圖標嵌套在設置顏色的父項下。這很煩人，但考慮到你會有魔法精靈世代，這並不可怕。

注：堆棧溢出一直對我非常有幫助，現在我想回到貢獻。如果這有幫助，請考慮投票。

來源

2012-08-15 01:57:23

指南針在同一圖標名稱下爲不同彩色主題創建多個精靈文件

回答

相關問題