2

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

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

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

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

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

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

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

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

更新澄清

当前文件夹结构。

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

配置文件

# $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 设置多个条目或取消“默认”连接。

4

2 回答 2

1

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

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

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

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

除了标记为 [color] 的相应可变部分外，文件相同：

@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 对我很有帮助，现在我正在努力回馈。如果这有帮助，请考虑投票。

于 2012-08-15T01:57:23.973 回答
1

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

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

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

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

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

于 2012-07-31T17:53:13.640 回答