Question

我正在寻求做以下事情，如果没有相当多的摆弄，我似乎无法理解。

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

我已将原始黑色图标设置为正确并将其包含在文件夹icon/*.png

中

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

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

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

我通过创建包含所有图标的通用图标/ * .png文件夹，然后复制生成的_icon.sass文件并编辑黑白图标来解决此问题。然后在我的灰色主题中包含'sprites / black'，在我的蓝色主题中包含'sprite / white'。这有效，但当你想添加新图标时，它有点像PITA。

非常感谢任何帮助！

更新以澄清

当前文件夹结构。

sprites/_white

config.rb

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

重新读取我的配置文件，就像我想为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模板，其中sprite具有相同的名称，并将选择器嵌套在每种颜色的不同类下。假设前面提到的文件结构：

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

考虑到这个文件结构，你可以在样式表中有一个名为sprite的文件夹，然后在其中，每个样式都有一个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 import directive：

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

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

2 个答案: