以一致的方式制作指南针顺序精灵答案

【问题标题】：Make Compass order sprites in a consistent way以一致的方式制作指南针顺序精灵
【发布时间】：2013-09-23 18:34:10
【问题描述】：

如何以一致的方式制作 Compass 顺序 sprite，以便为悬停状态提供单独的工作表？

我正在使用 Compass 的精灵表工具，如下所示：

@import "ui-icon/*.png";
@include all-ui-icon-sprites;

这样可以制作一个漂亮的精灵表，例如：{

.ui-icon-add {
  background-position: 0 -5344px; }

.ui-icon-alert {
  background-position: 0 -2352px; }

...etc...

但如果我将源精灵切换为悬停颜色，它会重新排列生成的表格：

.ui-icon-add {
  background-position: 0 -5376px; }

.ui-icon-alert {
  background-position: 0 -2320px; }

...etc...

我正在使用这样的悬停状态（基于 jQuery UI）：

.ui-icon {
    width: 16px;
    height: 16px;
    display: block;
    background-image: url('ui-icons.png');
}

.ui-state-hover .ui-icon {
    background-image: url('ui-icons-hover.png');
}

但由于指南针不一致，悬停时图标会有所不同。

（我知道 Compass 支持 _hover 后缀，但我更希望它像 jQuery UI 那样生成它们。）

【问题讨论】：

标签： css jquery-ui sass compass-sass

【解决方案1】：

尝试设置魔法变量：

$ui-icon-sprite-layout: horizontal;

对于您的两个图标精灵。以我的经验，水平是唯一一种每次都会以相同的顺序生成两个具有相同图标的精灵的布局模式。

另请参阅 GitHub 上的 Compass 问题：https://github.com/chriseppstein/compass/issues/690

【讨论】：

【解决方案2】：

您可以使用@each 循环以您想要的方式创建映射。缺点是它需要您遵循sprite 和hover-sprite 的命名约定，以及手动编辑$icons 变量。

目录结构

├── ui-icon
│   ├── add.png
│   ├── alert.png
│   ├── hover-add.png
│   └── hover-alert.png
└── ui-icon-s38eb55a811.png

SCSS

import "compass/utilities/sprites";

@import "ui-icon/*.png";
$icons:   add alert;

  @each $icon in $icons {
    .ui-icon-#{$icon} {
      @include ui-icon-sprite($icon);
    }
    .ui-icon-hover-#{$icon}{
      @include ui-icon-sprite("hover-" + $icon)
    }
}

CSS

.ui-icon-add {
  background-position: 0 0;
}

.ui-icon-hover-add {
  background-position: 0 -64px;
}

.ui-icon-alert {
  background-position: 0 -32px;
}

.ui-icon-hover-alert {
  background-position: 0 -96px;
}

【讨论】：

手动编辑 $icons 变量并不理想，因为我有数百个图标。